Aethel Bot OSS repository!
aethel.xyz
scanash.com
bot
fun
ai
discord
discord-bot
aethel
1import { create } from 'zustand';
2import { persist } from 'zustand/middleware';
3
4interface ThemeState {
5 isDarkMode: boolean;
6 toggleTheme: () => void;
7 setTheme: (isDark: boolean) => void;
8}
9
10export const useThemeStore = create<ThemeState>()(
11 persist(
12 (set, get) => ({
13 isDarkMode: false,
14 toggleTheme: () => {
15 const newTheme = !get().isDarkMode;
16 set({ isDarkMode: newTheme });
17 updateBodyClass(newTheme);
18 },
19 setTheme: (isDark: boolean) => {
20 set({ isDarkMode: isDark });
21 updateBodyClass(isDark);
22 },
23 }),
24 {
25 name: 'theme-storage',
26 onRehydrateStorage: () => (state) => {
27 if (state) {
28 updateBodyClass(state.isDarkMode);
29 }
30 },
31 },
32 ),
33);
34
35function updateBodyClass(isDark: boolean) {
36 if (typeof document !== 'undefined') {
37 if (isDark) {
38 document.documentElement.classList.add('dark');
39 document.body.classList.add('dark');
40 } else {
41 document.documentElement.classList.remove('dark');
42 document.body.classList.remove('dark');
43 }
44 }
45}
46
47if (typeof window !== 'undefined') {
48 const stored = localStorage.getItem('theme-storage');
49 if (stored) {
50 try {
51 const { state } = JSON.parse(stored);
52 updateBodyClass(state.isDarkMode);
53 } catch (_e) {
54 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
55 updateBodyClass(prefersDark);
56 }
57 } else {
58 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
59 updateBodyClass(prefersDark);
60 }
61}