fix: tweak style handling
This commit is contained in:
parent
43c151aaba
commit
a2f22843ee
@ -1,7 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount } from "svelte";
|
|
||||||
import { Router, Link, Route } from "svelte-navigator";
|
import { Router, Link, Route } from "svelte-navigator";
|
||||||
import Navigation from "./lib/Navigation.svelte";
|
import Navigation from "./lib/Navigation.svelte";
|
||||||
|
|
||||||
|
|
||||||
// theme cdns (I might make some myself too)
|
// theme cdns (I might make some myself too)
|
||||||
@ -10,17 +9,14 @@
|
|||||||
|
|
||||||
let styleSrc = dark;
|
let styleSrc = dark;
|
||||||
|
|
||||||
onMount(() => {
|
// if there's a style already set, retrieve it
|
||||||
if (localStorage.getItem("pk-style")) setStyle(localStorage.getItem("pk-style").toLowerCase());
|
let style = localStorage.getItem("pk-style") && localStorage.getItem("pk-style");
|
||||||
});
|
|
||||||
|
|
||||||
function styleEventHandler(event) {
|
// this automatically applies the style every time it is updated
|
||||||
let style = event.detail;
|
$: setStyle(style);
|
||||||
setStyle(style);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
// not sure if there's a better way to handle this
|
||||||
function setStyle(style) {
|
function setStyle(style) {
|
||||||
|
|
||||||
switch (style) {
|
switch (style) {
|
||||||
case "light": styleSrc = light;
|
case "light": styleSrc = light;
|
||||||
localStorage.setItem("pk-style", "light");
|
localStorage.setItem("pk-style", "light");
|
||||||
@ -41,7 +37,7 @@
|
|||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<Router>
|
<Router>
|
||||||
<Navigation on:styleChange={styleEventHandler}/>
|
<Navigation bind:style={style}/>
|
||||||
<div>
|
<div>
|
||||||
<Route path="/">
|
<Route path="/">
|
||||||
<h2>Ooga booga</h2>
|
<h2>Ooga booga</h2>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user