From a2f22843eeaf2f7d6eb0c7ceb1161c71418413c8 Mon Sep 17 00:00:00 2001
From: Spectralitree <72747870+Spectralitree@users.noreply.github.com>
Date: Sat, 11 Dec 2021 12:00:38 +0100
Subject: [PATCH] fix: tweak style handling

---
 src/App.svelte | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 1cf05784..2ed49af3 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-  import { onMount } from "svelte";
   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)
@@ -10,17 +9,14 @@
 
   let styleSrc = dark;
 
-  onMount(() => {
-    if (localStorage.getItem("pk-style")) setStyle(localStorage.getItem("pk-style").toLowerCase());
-  });
+  // if there's a style already set, retrieve it
+  let style = localStorage.getItem("pk-style") && localStorage.getItem("pk-style");
 
-  function styleEventHandler(event) {
-    let style = event.detail;
-    setStyle(style);
-  }
+  // this automatically applies the style every time it is updated
+  $: setStyle(style);
 
+  // not sure if there's a better way to handle this
   function setStyle(style) {
-    
     switch (style) {
       case "light": styleSrc = light;
       localStorage.setItem("pk-style", "light");
@@ -41,7 +37,7 @@
 </svelte:head>
 
 <Router>
-  <Navigation on:styleChange={styleEventHandler}/>
+  <Navigation bind:style={style}/>
   <div>
     <Route path="/">
         <h2>Ooga booga</h2>