diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts index 35b2a40..4a21e08 100644 --- a/src/lib/stores/index.ts +++ b/src/lib/stores/index.ts @@ -2,35 +2,49 @@ import { writable } from 'svelte/store'; import { themes, type Theme } from '$lib/styles'; function createThemeStore() { - // Get initial theme from localStorage or default to catppuccin - const storedTheme = typeof window !== 'undefined' - ? localStorage.getItem('theme') - : 'catppuccin'; - - const { subscribe, set } = writable(themes[storedTheme || 'catppuccin']); + // Default theme + const defaultTheme = themes.catppuccin; + + // Initialize with default theme + const { subscribe, set } = writable(defaultTheme); + + // Initialize theme on client-side only + if (typeof window !== 'undefined') { + const storedTheme = localStorage.getItem('theme'); + if (storedTheme && themes[storedTheme]) { + set(themes[storedTheme]); + } + } return { subscribe, setTheme: (themeName: string) => { const theme = themes[themeName]; if (theme) { - localStorage.setItem('theme', themeName); + if (typeof window !== 'undefined') { + localStorage.setItem('theme', themeName); + } set(theme); applyTheme(theme); } }, init: () => { - const theme = themes[storedTheme || 'catppuccin']; + const storedTheme = typeof window !== 'undefined' + ? localStorage.getItem('theme') + : null; + const theme = (storedTheme && themes[storedTheme]) || defaultTheme; applyTheme(theme); } }; } function applyTheme(theme: Theme) { - const root = document.documentElement; - Object.entries(theme.colors).forEach(([key, value]) => { - root.style.setProperty(`--${key}`, value); - }); + if (typeof window !== 'undefined') { + const root = document.documentElement; + Object.entries(theme.colors).forEach(([key, value]) => { + root.style.setProperty(`--${key}`, value); + }); + } } export const themeStore = createThemeStore();