From 877b45b1a3ee5f3f77c50c1345d76efedaa9bfbe Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sun, 12 Jul 2026 17:52:23 +0100
Subject: [PATCH] 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 <rotimi-best@users.noreply.github.com>

* 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 <rotimi-best@users.noreply.github.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>
---
 .../lib/features/app/app-mode-watcher.svelte  | 37 +++++++++++++++++
 .../ui/sidebar/footer/theme-toggle.svelte     | 34 +++++++++-------
 .../src/lib/utils/constants/routes.ts         |  7 ----
 .../lib/utils/functions/color-mode.test.ts    | 40 +++++++++++++++++++
 .../src/lib/utils/functions/color-mode.ts     | 14 +++++++
 .../lib/utils/functions/color-scheme.test.ts  | 25 ------------
 .../src/lib/utils/functions/color-scheme.ts   | 23 -----------
 apps/dashboard/src/routes/+layout.svelte      | 12 +-----
 8 files changed, 112 insertions(+), 80 deletions(-)
 create mode 100644 apps/dashboard/src/lib/features/app/app-mode-watcher.svelte
 create mode 100644 apps/dashboard/src/lib/utils/functions/color-mode.test.ts
 create mode 100644 apps/dashboard/src/lib/utils/functions/color-mode.ts
 delete mode 100644 apps/dashboard/src/lib/utils/functions/color-scheme.test.ts
 delete mode 100644 apps/dashboard/src/lib/utils/functions/color-scheme.ts

diff --git a/apps/dashboard/src/lib/features/app/app-mode-watcher.svelte b/apps/dashboard/src/lib/features/app/app-mode-watcher.svelte
new file mode 100644
index 00000000..8e4fdcfb
--- /dev/null
+++ b/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 />
diff --git a/apps/dashboard/src/lib/features/ui/sidebar/footer/theme-toggle.svelte b/apps/dashboard/src/lib/features/ui/sidebar/footer/theme-toggle.svelte
index 30b8301b..070b6448 100644
--- a/apps/dashboard/src/lib/features/ui/sidebar/footer/theme-toggle.svelte
+++ b/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)}
       >
diff --git a/apps/dashboard/src/lib/utils/constants/routes.ts b/apps/dashboard/src/lib/utils/constants/routes.ts
index da36a1fb..43e37660 100644
--- a/apps/dashboard/src/lib/utils/constants/routes.ts
+++ b/apps/dashboard/src/lib/utils/constants/routes.ts
@@ -20,13 +20,6 @@ export const ROUTE = {
   VERIFY_EMAIL_ERROR: '/verify-email-error'
 };
 
-export const PUBLIC_ORG_SITE_LIGHT_MODE_ROUTES = [
-  `^${ROUTE.HOME}$`,
-  `^${ROUTE.COURSES}/?$`,
-  `^${ROUTE.COURSE}/[^/]+/?$`,
-  `^${ROUTE.COURSE}/[^/]+/enroll/?$`
-] as const;
-
 export const PUBLIC_ROUTES = [
   `^${ROUTE.HOME}$`,
   ROUTE.LOGIN,
diff --git a/apps/dashboard/src/lib/utils/functions/color-mode.test.ts b/apps/dashboard/src/lib/utils/functions/color-mode.test.ts
new file mode 100644
index 00000000..343168b7
--- /dev/null
+++ b/apps/dashboard/src/lib/utils/functions/color-mode.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+
+import { MODE_STORAGE_KEY, readStoredColorMode } from './color-mode';
+
+function createMemoryStorage(initial: Record<string, string> = {}): Storage {
+  const store = new Map(Object.entries(initial));
+
+  return {
+    get length() {
+      return store.size;
+    },
+    clear() {
+      store.clear();
+    },
+    getItem(key: string) {
+      return store.has(key) ? store.get(key)! : null;
+    },
+    key(index: number) {
+      return [...store.keys()][index] ?? null;
+    },
+    removeItem(key: string) {
+      store.delete(key);
+    },
+    setItem(key: string, value: string) {
+      store.set(key, value);
+    }
+  };
+}
+
+describe('readStoredColorMode', () => {
+  it('defaults to light when nothing is stored', () => {
+    expect(readStoredColorMode(createMemoryStorage())).toBe('light');
+  });
+
+  it('returns the stored sidebar preference', () => {
+    const storage = createMemoryStorage({ [MODE_STORAGE_KEY]: 'dark' });
+
+    expect(readStoredColorMode(storage)).toBe('dark');
+  });
+});
diff --git a/apps/dashboard/src/lib/utils/functions/color-mode.ts b/apps/dashboard/src/lib/utils/functions/color-mode.ts
new file mode 100644
index 00000000..e2b6b09c
--- /dev/null
+++ b/apps/dashboard/src/lib/utils/functions/color-mode.ts
@@ -0,0 +1,14 @@
+export type ColorModePreference = 'light' | 'dark' | 'system';
+
+export const MODE_STORAGE_KEY = 'mode-watcher-mode';
+
+export function isColorModePreference(value: string | null | undefined): value is ColorModePreference {
+  return value === 'light' || value === 'dark' || value === 'system';
+}
+
+/** Read the sidebar theme preference from mode-watcher storage. */
+export function readStoredColorMode(storage: Pick<Storage, 'getItem'> = localStorage): ColorModePreference {
+  const stored = storage.getItem(MODE_STORAGE_KEY);
+
+  return isColorModePreference(stored) ? stored : 'light';
+}
diff --git a/apps/dashboard/src/lib/utils/functions/color-scheme.test.ts b/apps/dashboard/src/lib/utils/functions/color-scheme.test.ts
deleted file mode 100644
index dee39e4b..00000000
--- a/apps/dashboard/src/lib/utils/functions/color-scheme.test.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { isPublicOrgSitePage } from './color-scheme';
-
-describe('isPublicOrgSitePage', () => {
-  it('returns false for non-org-site routes', () => {
-    expect(isPublicOrgSitePage(false, '/lms')).toBe(false);
-    expect(isPublicOrgSitePage(false, '/courses/abc')).toBe(false);
-  });
-
-  it('returns true for public org-site pages', () => {
-    expect(isPublicOrgSitePage(true, '/')).toBe(true);
-    expect(isPublicOrgSitePage(true, '/courses')).toBe(true);
-    expect(isPublicOrgSitePage(true, '/courses/')).toBe(true);
-    expect(isPublicOrgSitePage(true, '/course/my-course')).toBe(true);
-    expect(isPublicOrgSitePage(true, '/course/my-course/enroll')).toBe(true);
-  });
-
-  it('returns false for authenticated org-site app routes', () => {
-    expect(isPublicOrgSitePage(true, '/lms')).toBe(false);
-    expect(isPublicOrgSitePage(true, '/lms/settings')).toBe(false);
-    expect(isPublicOrgSitePage(true, '/courses/abc')).toBe(false);
-    expect(isPublicOrgSitePage(true, '/courses/abc/newsfeed')).toBe(false);
-    expect(isPublicOrgSitePage(true, '/course/my-course/lesson/intro')).toBe(false);
-  });
-});
diff --git a/apps/dashboard/src/lib/utils/functions/color-scheme.ts b/apps/dashboard/src/lib/utils/functions/color-scheme.ts
deleted file mode 100644
index ebf2de5c..00000000
--- a/apps/dashboard/src/lib/utils/functions/color-scheme.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { PUBLIC_ORG_SITE_LIGHT_MODE_ROUTES } from '$lib/utils/constants/routes';
-
-function normalizePathname(pathname: string): string {
-  const pathOnly = pathname.split('?')[0] ?? '/';
-  if (pathOnly === '/') {
-    return '/';
-  }
-
-  return pathOnly.replace(/\/+$/, '') || '/';
-}
-
-/**
- * Public org-site pages (landing, catalog, course landing, enroll) always use light mode.
- * Authenticated areas on the same tenant host (e.g. /lms, /courses/:id) keep the theme selector.
- */
-export function isPublicOrgSitePage(isOrgSite: boolean, pathname: string): boolean {
-  if (!isOrgSite) {
-    return false;
-  }
-
-  const normalizedPath = normalizePathname(pathname);
-  return PUBLIC_ORG_SITE_LIGHT_MODE_ROUTES.some((pattern) => new RegExp(pattern).test(normalizedPath));
-}
diff --git a/apps/dashboard/src/routes/+layout.svelte b/apps/dashboard/src/routes/+layout.svelte
index 0ae28e38..bd6f5ed9 100644
--- a/apps/dashboard/src/routes/+layout.svelte
+++ b/apps/dashboard/src/routes/+layout.svelte
@@ -14,9 +14,8 @@
   import { authClient } from '$lib/utils/services/auth/client';
   import merge from 'lodash/merge';
   import { MetaTags } from 'svelte-meta-tags';
-  import { ModeWatcher } from '@cio/ui/base/dark-mode';
+  import AppModeWatcher from '$features/app/app-mode-watcher.svelte';
   import OrgSiteFavicon from '$features/app/org-site-favicon.svelte';
-  import { isPublicOrgSitePage } from '$lib/utils/functions/color-scheme';
 
   import '../app.css';
 
@@ -27,7 +26,6 @@
   setUploadLimitsContext(data.uploadLimits);
 
   const metaTags = $derived(merge(data.baseMetaTags, page.data.pageMetaTags));
-  const forceLightMode = $derived(isPublicOrgSitePage(data.isOrgSite, page.url.pathname));
 
   onMount(() => {
     console.log('Layout', data);
@@ -105,13 +103,7 @@
 </svelte:head>
 
 <div>
-  {#key forceLightMode}
-    {#if forceLightMode}
-      <ModeWatcher defaultMode="light" track={false} />
-    {:else}
-      <ModeWatcher />
-    {/if}
-  {/key}
+  <AppModeWatcher />
 
   <MetaTags {...metaTags} />