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>
This commit is contained in:
Rotimi Best
co-authored by
Rotimi Best
Cursor Agent
Rotimi Best
Cursor Agent
parent
46feccd0fd
commit
877b45b1a3
@@ -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 />
|
||||
@@ -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)}
|
||||
>
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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');
|
||||
});
|
||||
});
|
||||
@@ -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';
|
||||
}
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
@@ -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));
|
||||
}
|
||||
@@ -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} />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user