update

src/lib/components/ThemeSelect.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { type Theme, currentTheme } from '$routes/+layout.svelte';
-
     import Select, { type SelectOption } from './Select.svelte';
     import { Select as Select2 } from '$lib/components/ui';
+    import { themeStore, setTheme, type Theme } from '$lib/providers/theme';
+    import { get } from 'svelte/store';
 
     const options = [
         {
@@ -23,5 +23,11 @@
     ];
 </script>
 
-<Select {options} bind:value={$currentTheme} placement="top" />
+<Select {options} bind:value={$themeStore.theme} placement="top" />
-<Select2 {options} bind:value={$currentTheme} />
+<Select2
+    {options}
+    bind:value={$themeStore.theme}
+    onValueChange={(e) => {
+        setTheme(e as Theme);
+    }}
+/>

src/lib/providers/theme/index.ts

@@ -21,4 +21,5 @@ export const themeStore = writable<ThemeStore>({
 	systemTheme: undefined
 });
 
+
 export { default as ThemeProvider } from './theme.svelte'

src/routes/+layout.svelte

@@ -1,48 +1,6 @@
 <script lang="ts" context="module">
-    import { derived, writable } from 'svelte/store';
     import { loadReoScript } from 'reodotdev';
     import { ThemeProvider } from '$lib/providers/theme';
-
-    export type Theme = 'dark' | 'light' | 'system';
-    export const currentTheme = (function () {
-        const store = writable<Theme>(getPreferredTheme());
-
-        const set: typeof store.set = (value) => {
-            store.set(value);
-            if (browser) {
-                localStorage.setItem('theme', value);
-                document.documentElement.style.setProperty('color-scheme', value);
-            }
-        };
-
-        return { ...store, set };
-    })();
-
-    export const themeInUse = derived(currentTheme, (theme) => {
-        return theme === 'system' ? getSystemTheme() : theme;
-    });
-
-    function isTheme(theme: unknown): theme is Theme {
-        return ['dark', 'light', 'system'].includes(theme as Theme);
-    }
-
-    function getSystemTheme(): Theme {
-        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    }
-
-    function getPreferredTheme() {
-        if (!browser) {
-            return 'dark';
-        }
-
-        const theme = localStorage.getItem('theme');
-
-        if (!isTheme(theme)) {
-            return 'dark';
-        }
-
-        return theme;
-    }
 </script>
 
 <script lang="ts">
@@ -58,38 +16,11 @@
     import { trackEvent } from '$lib/actions/analytics';
     import { saveReferrerAndUtmSource } from '$lib/utils/utm';
 
-    function applyTheme(theme: Theme) {
-        const resolvedTheme = theme === 'system' ? getSystemTheme() : theme;
-        const className = `${resolvedTheme}`;
-        document.body.classList.remove('dark', 'light');
-        document.body.classList.add(className);
-    }
-
     const thresholds = [0.25, 0.5, 0.75];
     const tracked = new Set();
 
     onMount(() => {
         saveReferrerAndUtmSource($page.url);
-
-        const initialTheme = $page.route.id?.startsWith('/docs') ? getPreferredTheme() : 'dark';
-
-        applyTheme(initialTheme);
-
-        navigating.subscribe((n) => {
-            if (!n?.to) {
-                return;
-            }
-
-            const isDocs = n.to.route.id?.startsWith('/docs');
-
-            if (isDocs) {
-                if (!document.body.classList.contains(`${$currentTheme}`)) {
-                    applyTheme($currentTheme);
-                }
-            } else {
-                applyTheme('dark');
-            }
-        });
     });
 
     beforeNavigate(({ willUnload, to }) => {
@@ -101,7 +32,6 @@
         }
     });
 
-    $: if (browser) currentTheme.subscribe((theme) => applyTheme(theme));
     $: if (browser && $loggedIn) {
         document.body.dataset.loggedIn = '';
     }