877b45b1a3
* 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]>
51 lines
1.3 KiB
Svelte
51 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { Button } from '@cio/ui/base/button';
|
|
import { MonitorIcon, SunIcon, MoonIcon } from '@lucide/svelte';
|
|
import { userPrefersMode, setMode } from '@cio/ui/base/dark-mode';
|
|
|
|
type ThemeMode = 'light' | 'dark' | 'system';
|
|
|
|
const themes: { mode: ThemeMode; icon: typeof MonitorIcon }[] = [
|
|
{ mode: 'light', icon: SunIcon },
|
|
{ mode: 'dark', icon: MoonIcon },
|
|
{ mode: 'system', icon: MonitorIcon }
|
|
];
|
|
|
|
const activeMode = $derived(userPrefersMode.current ?? 'system');
|
|
|
|
const handleThemeChange = (newMode: ThemeMode) => {
|
|
if (newMode === 'light') {
|
|
setMode('light');
|
|
return;
|
|
}
|
|
|
|
if (newMode === 'dark') {
|
|
setMode('dark');
|
|
return;
|
|
}
|
|
|
|
setMode('system');
|
|
};
|
|
</script>
|
|
|
|
<div class="flex items-center justify-between gap-8">
|
|
<p>Theme</p>
|
|
|
|
<div class="flex items-center gap-1 rounded-md backdrop-blur-sm">
|
|
{#each themes as theme (theme.mode)}
|
|
<Button
|
|
size="icon-sm"
|
|
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)}
|
|
>
|
|
<theme.icon class="size-4" />
|
|
</Button>
|
|
{/each}
|
|
</div>
|
|
</div>
|