fix: fix issue (caused by svelte5 migration) where colour scheme preference wasn't persisting

src/lib/components/Navbar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { tweened } from 'svelte/motion'
+  import { tweened } from "svelte/motion";
-  import { expoOut } from 'svelte/easing'
+  import { expoOut } from "svelte/easing";
   import {
     colourSchemeStore,
     lightColourScheme,
@@ -19,13 +19,13 @@
 
   const iconMovement = tweened(0, {
     duration: 300,
-	easing: expoOut
+    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>

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

src/stores/colourSchemeStore.ts

@@ -1,5 +1,4 @@
-import { writable } from "svelte/store";
+import { writable } from 'svelte/store';
-import { browser } from '$app/environment'
 
 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);
-
-