46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { create } from 'zustand';
|
|
|
|
type Theme = 'dark' | 'light';
|
|
|
|
interface ThemeState {
|
|
theme: Theme;
|
|
toggleTheme: () => void;
|
|
initTheme: () => void;
|
|
setTheme: (theme: Theme) => void;
|
|
}
|
|
|
|
export const useThemeStore = create<ThemeState>((set) => ({
|
|
theme: 'dark',
|
|
toggleTheme: () => set((state) => {
|
|
const newTheme = state.theme === 'dark' ? 'light' : 'dark';
|
|
localStorage.setItem('theme-preference', newTheme);
|
|
if (newTheme === 'dark') {
|
|
document.documentElement.classList.add('dark');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
return { theme: newTheme };
|
|
}),
|
|
initTheme: () => set(() => {
|
|
const saved = localStorage.getItem('theme-preference');
|
|
const initialTheme = saved ? (saved as Theme) : 'dark';
|
|
|
|
if (initialTheme === 'dark') {
|
|
document.documentElement.classList.add('dark');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
|
|
return { theme: initialTheme };
|
|
}),
|
|
setTheme: (theme) => set(() => {
|
|
localStorage.setItem('theme-preference', theme);
|
|
if (theme === 'dark') {
|
|
document.documentElement.classList.add('dark');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
return { theme };
|
|
})
|
|
}));
|