Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 7x 4x 4x 7x 7x 7x 3x 3x 3x 7x 7x 2x 2x 7x 7x 7x | /**
* @file useThemeMode.ts
* @description
* Custom hook for managing theme mode (light/dark) with localStorage persistence.
* Initializes from localStorage on mount and persists changes.
*
* @enterprise
* - localStorage persistence key: 'themeMode'
* - Default mode: 'light'
* - Provides toggle function for easy theme switching
* - Automatic persistence on state change
*
* @example
* ```tsx
* const { themeMode, setThemeMode, toggleThemeMode } = useThemeMode();
* ```
*
* @returns Object with themeMode state, setter, and toggle function
*/
import * as React from 'react';
const LS_THEME_KEY = 'themeMode';
interface UseThemeModeReturn {
/** Current theme mode */
themeMode: 'light' | 'dark';
/** Set theme mode directly */
setThemeMode: (mode: 'light' | 'dark') => void;
/** Toggle between light and dark modes */
toggleThemeMode: () => void;
}
/**
* useThemeMode hook
* @returns Theme mode state and control functions
*/
export const useThemeMode = (): UseThemeModeReturn => {
const [themeMode, setThemeModeState] = React.useState<'light' | 'dark'>(() => {
const saved = localStorage.getItem(LS_THEME_KEY) as 'light' | 'dark' | null;
return saved || 'light';
});
const setThemeMode = (mode: 'light' | 'dark') => {
localStorage.setItem(LS_THEME_KEY, mode);
setThemeModeState(mode);
};
const toggleThemeMode = () => {
setThemeMode(themeMode === 'light' ? 'dark' : 'light');
};
return { themeMode, setThemeMode, toggleThemeMode };
};
|