From be256f7ed33d18d281dbb925666b1fa837378d6d Mon Sep 17 00:00:00 2001
From: Thomas <thomas@thomaswilson.xyz>
Date: Thu, 16 Jan 2025 20:05:59 +0000
Subject: [PATCH] fix: fix issue (caused by svelte5 migration) where colour
 scheme preference wasn't persisting

---
 src/lib/components/Navbar.svelte | 15 +++++++--------
 src/routes/+layout.svelte        | 17 ++++++++++-------
 src/stores/colourSchemeStore.ts  | 11 ++++-------
 3 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index fb7d932..213429a 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { tweened } from 'svelte/motion'
-  import { expoOut } from 'svelte/easing'
+  import { tweened } from "svelte/motion";
+  import { expoOut } from "svelte/easing";
   import {
     colourSchemeStore,
     lightColourScheme,
@@ -14,18 +14,18 @@
       $colourSchemeStore.name === "dark" ? lightColourScheme : darkColourScheme;
     localStorage.setItem("colourScheme", newColourScheme.name);
     colourSchemeStore.set(newColourScheme);
-	iconMovement.set($iconMovement + 360);
+    iconMovement.set($iconMovement + 360);
   }
 
   const iconMovement = tweened(0, {
-	duration: 300,
-	easing: expoOut
+    duration: 300,
+    easing: expoOut,
   });
 </script>
 
 <nav>
   <div class="left">
-    <a href="/" class="home">Thomas Wilson</a>
+    <a href="/" class="home">TWC</a>
   </div>
 
   <div class="right">
@@ -37,7 +37,6 @@
         width="24"
         height="24"
         style="transform: rotate({$iconMovement}deg)"
-		
       />
     </button>
     <a href="/blog" class="blog">/blog</a>
@@ -93,7 +92,7 @@
   }
 
   svg path {
-	fill: var(--colour-scheme-text);
+    fill: var(--colour-scheme-text);
   }
 
   .blog {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d5eb87e..343b472 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,24 +5,31 @@
     colourSchemes,
     darkColourScheme,
     lightColourScheme,
-  } from "../stores/colourSchemeStore.ts";
+  } from "../stores/colourSchemeStore.js";
   import { browser } from "$app/environment";
   import { onMount } from "svelte";
   interface Props {
-    children?: import('svelte').Snippet;
+    children?: import("svelte").Snippet;
   }
 
   let { children }: Props = $props();
 
-  onMount(() => {
+  $effect(() => {
     const prefersDarkmode: boolean = window.matchMedia(
       "(prefers-color-scheme: dark)"
     ).matches;
 
     const colourSchemeName: string | null =
       localStorage.getItem("colourScheme");
+
     const colourScheme = colourSchemes?.[colourSchemeName];
 
+    console.log({
+      prefersDarkmode,
+      colourSchemeName,
+      colourScheme,
+    });
+
     if (colourScheme) {
       colourSchemeStore.set(colourScheme);
     } else if (prefersDarkmode) {
@@ -40,10 +47,6 @@
       value.background
     );
 
-    // document.documentElement.style.setProperty(
-    //   "--colour-scheme-back""
-    // )
-
     document.documentElement.style.setProperty(
       "--colour-scheme-text",
       value.text
diff --git a/src/stores/colourSchemeStore.ts b/src/stores/colourSchemeStore.ts
index ca6397c..9dfce92 100644
--- a/src/stores/colourSchemeStore.ts
+++ b/src/stores/colourSchemeStore.ts
@@ -1,5 +1,4 @@
-import { writable } from "svelte/store";
-import { browser } from '$app/environment'
+import { writable } from 'svelte/store';
 
 type ColourSchemeName = 'light' | 'dark';
 
@@ -16,7 +15,7 @@ export const lightColourScheme: ColourScheme = {
     background: 'white',
     backgroundAccent: '#f8f9fa',
     text: '#212529',
-    textAccent: '#495057'
+    textAccent: '#495057',
 };
 
 export const darkColourScheme: ColourScheme = {
@@ -24,14 +23,12 @@ export const darkColourScheme: ColourScheme = {
     background: '#212529',
     backgroundAccent: '#343a40',
     text: '#f8f9fa',
-    textAccent: '#ced4da'
+    textAccent: '#ced4da',
 };
 
 export const colourSchemes: Record<ColourSchemeName, ColourScheme> = {
     light: lightColourScheme,
-    dark: darkColourScheme
+    dark: darkColourScheme,
 };
 
 export const colourSchemeStore = writable<ColourScheme>(lightColourScheme);
-
-