fix(dashboard): honor sidebar theme preference on all routes (#738)

* fix(dashboard): honor sidebar theme preference on all routes

Stop forcing light mode on public org-site pages. Use one ModeWatcher
everywhere so light/dark/system follows the sidebar footer toggle.

- Remove isPublicOrgSitePage forced-light routing (#716 behavior)
- Fix theme toggle active state (light/dark/system mutually exclusive)

Co-authored-by: Rotimi Best <[email protected]>

* fix(dashboard): apply sidebar color mode instead of browser default

ModeWatcher defaulted to system, so prefers-color-scheme won unless
localStorage happened to match. AppModeWatcher now:

- Defaults new visitors to light (not system)
- Injects FOUC script with the same default
- Only tracks OS appearance when the user picks System in the sidebar
- Re-syncs explicit light/dark from mode-watcher localStorage on load

Co-authored-by: Rotimi Best <[email protected]>

---------

Co-authored-by: Cursor Agent <[email protected]>
Co-authored-by: Rotimi Best <[email protected]>

apps/dashboard/src/lib/features/app/app-mode-watcher.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { browser } from '$app/environment';
+  import {
+    ModeWatcher,
+    createInitialModeExpression,
+    setMode,
+    systemPrefersMode,
+    userPrefersMode
+  } from '@cio/ui/base/dark-mode';
+
+  import { MODE_STORAGE_KEY, readStoredColorMode } from '$lib/utils/functions/color-mode';
+
+  const initialModeScript = createInitialModeExpression({
+    defaultMode: 'light',
+    modeStorageKey: MODE_STORAGE_KEY
+  });
+
+  $effect(() => {
+    if (!browser) {
+      return;
+    }
+
+    const storedPreference = readStoredColorMode();
+    systemPrefersMode.tracking(storedPreference === 'system');
+
+    if (storedPreference !== 'system' && userPrefersMode.current !== storedPreference) {
+      setMode(storedPreference);
+    }
+  });
+</script>
+
+<svelte:head>
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+  {@html initialModeScript}
+</svelte:head>
+
+<ModeWatcher defaultMode="light" disableHeadScriptInjection />

apps/dashboard/src/lib/features/ui/sidebar/footer/theme-toggle.svelte

@@ -1,29 +1,31 @@
 <script lang="ts">
   import { Button } from '@cio/ui/base/button';
   import { MonitorIcon, SunIcon, MoonIcon } from '@lucide/svelte';
-  import { userPrefersMode, resetMode, setMode } from '@cio/ui/base/dark-mode';
+  import { userPrefersMode, setMode } from '@cio/ui/base/dark-mode';
 
-  type UserPrefersMode = typeof userPrefersMode.current;
+  type ThemeMode = 'light' | 'dark' | 'system';
 
-  const themes: { mode: UserPrefersMode; icon: typeof MonitorIcon }[] = [
+  const themes: { mode: ThemeMode; icon: typeof MonitorIcon }[] = [
     { mode: 'light', icon: SunIcon },
     { mode: 'dark', icon: MoonIcon },
     { mode: 'system', icon: MonitorIcon }
   ];
 
-  const handleThemeChange = (newMode: UserPrefersMode) => {
+  const activeMode = $derived(userPrefersMode.current ?? 'system');
+
+  const handleThemeChange = (newMode: ThemeMode) => {
     if (newMode === 'light') {
       setMode('light');
-    } else if (newMode === 'dark') {
-      setMode('dark');
-    } else {
-      resetMode();
+      return;
     }
-  };
 
-  $effect(() => {
-    console.log('mode.current', userPrefersMode.current);
-  });
+    if (newMode === 'dark') {
+      setMode('dark');
+      return;
+    }
+
+    setMode('system');
+  };
 </script>
 
 <div class="flex items-center justify-between gap-8">
@@ -31,11 +33,13 @@
 
   <div class="flex items-center gap-1 rounded-md backdrop-blur-sm">
     {#each themes as theme (theme.mode)}
-      {@const isActive = userPrefersMode.current === theme.mode || userPrefersMode.current === undefined}
       <Button
         size="icon-sm"
-        variant={isActive ? 'outline' : 'ghost'}
-        class={['size-4 rounded-md p-1 transition-all duration-200', isActive && 'shadow-primary/20 shadow-lg']}
+        variant={activeMode === theme.mode ? 'outline' : 'ghost'}
+        class={[
+          'size-4 rounded-md p-1 transition-all duration-200',
+          activeMode === theme.mode && 'shadow-primary/20 shadow-lg'
+        ]}
         title={theme.mode}
         onclick={() => handleThemeChange(theme.mode)}
       >