| import { useContext } from 'react'; |
| import { LOCAL_STORAGE_THEME_KEY, Theme, ThemeContext } from './ThemeContext'; |
|
|
| interface UseThemeResult { |
| toggleTheme: (newTheme: Theme) => void; |
| theme: Theme; |
| } |
|
|
| export function useTheme(): UseThemeResult { |
| const { theme, setTheme } = useContext(ThemeContext); |
|
|
| const toggleTheme = (newTheme: Theme) => { |
| setTheme?.(newTheme); |
|
|
| |
| let bodyClassesArray: any = document.body.className.split(' '); |
|
|
| if (bodyClassesArray.includes('light')) { |
| bodyClassesArray.splice(bodyClassesArray.indexOf('light'), 1); |
| } |
|
|
| if (bodyClassesArray.includes('dark')) { |
| bodyClassesArray.splice(bodyClassesArray.indexOf('dark'), 1); |
| } |
|
|
| bodyClassesArray = bodyClassesArray.join(' '); |
| document.body.className = `${bodyClassesArray} ${newTheme || Theme.LIGHT}`; |
| localStorage.setItem(LOCAL_STORAGE_THEME_KEY, newTheme); |
| }; |
|
|
| return { |
| theme: theme || Theme.LIGHT, |
| toggleTheme, |
| }; |
| } |
|
|
