fix: tweak style handling

This commit is contained in:
Spectralitree 2021-12-11 12:00:38 +01:00
parent 43c151aaba
commit a2f22843ee

View File

@ -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>