revert a bit

src/lib/components/ThemeSelect.svelte

@@ -1,7 +1,6 @@
 <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 } from '$lib/providers/theme';
 
     const options = [
         {
@@ -22,11 +21,4 @@
     ];
 </script>
 
-<Select {options} bind:value={$themeStore.theme} placement="top" />
+<Select {options} bind:value={$currentTheme} placement="top" />
-<Select2
-    {options}
-    bind:value={$themeStore.theme}
-    onValueChange={(e) => {
-        setTheme(e);
-    }}
-/>

src/routes/+layout.svelte

@@ -1,6 +1,47 @@
 <script lang="ts" context="module">
     import { loadReoScript } from 'reodotdev';
-    import { ThemeProvider } from '$lib/providers/theme';
+    import { derived, writable } from 'svelte/store';
+
+    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">
@@ -16,10 +57,37 @@
     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(() => {
+        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');
+            }
+        });
+
         saveReferrerAndUtmSource($page.url);
     });
 
@@ -32,6 +100,7 @@
         }
     });
 
+    $: if (browser) currentTheme.subscribe((theme) => applyTheme(theme));
     $: if (browser && $loggedIn) {
         document.body.dataset.loggedIn = '';
     }
@@ -132,7 +201,6 @@
 >
 
 <slot />
-<ThemeProvider attribute="class" disableTransitionOnChange />
 
 <style lang="scss">
     :global(html) {