fix default theme selection

This commit is contained in:
Abdenasser 2024-11-09 12:36:26 +01:00
parent 250eb37fb6
commit a4f2a5e4a9

View File

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