43 lines
918 B
TypeScript
43 lines
918 B
TypeScript
import { create } from 'zustand';
|
|
import { persist } from 'zustand/middleware';
|
|
|
|
type Theme = 'light' | 'dark';
|
|
|
|
interface ThemeState {
|
|
theme: Theme;
|
|
setTheme: (theme: Theme) => void;
|
|
toggleTheme: () => void;
|
|
}
|
|
|
|
export const useThemeStore = create<ThemeState>()(
|
|
persist(
|
|
(set, get) => ({
|
|
theme: 'light',
|
|
setTheme: (theme) => {
|
|
set({ theme });
|
|
applyTheme(theme);
|
|
},
|
|
toggleTheme: () => {
|
|
const next = get().theme === 'light' ? 'dark' : 'light';
|
|
set({ theme: next });
|
|
applyTheme(next);
|
|
},
|
|
}),
|
|
{
|
|
name: 'mikrotik-theme',
|
|
onRehydrateStorage: () => (state) => {
|
|
if (state) applyTheme(state.theme);
|
|
},
|
|
}
|
|
)
|
|
);
|
|
|
|
function applyTheme(theme: Theme): void {
|
|
const root = document.documentElement;
|
|
if (theme === 'dark') {
|
|
root.classList.add('dark');
|
|
} else {
|
|
root.classList.remove('dark');
|
|
}
|
|
}
|