| // Light or dark. The choice persists in this browser; without one the system setting | |
| // decides. The root element carries data-theme so the stylesheet redefines the tokens. | |
| import { writable } from 'svelte/store'; | |
| export type Theme = 'dark' | 'light'; | |
| const KEY = 'lifekit.theme'; | |
| function initial(): Theme { | |
| try { | |
| const saved = localStorage.getItem(KEY); | |
| if (saved === 'dark' || saved === 'light') return saved; | |
| } catch { | |
| /* storage unavailable */ | |
| } | |
| return typeof matchMedia === 'function' && matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'; | |
| } | |
| export const theme = writable<Theme>(initial()); | |
| theme.subscribe((t) => { | |
| if (typeof document !== 'undefined') document.documentElement.setAttribute('data-theme', t); | |
| try { | |
| localStorage.setItem(KEY, t); | |
| } catch { | |
| /* storage unavailable */ | |
| } | |
| }); | |
| export const toggleTheme = () => theme.update((t) => (t === 'dark' ? 'light' : 'dark')); | |