useDarkMode()
This React Hook offers you an interface to enable, disable, toggle and read the dark theme mode.
The returned value (isDarkMode
) is a boolean to let you be able to use with your logic.
It uses internally useLocalStorage()
to persist the value and listens the OS color scheme preferences.
The Hook
1import { useLocalStorage, useMediaQuery, useUpdateEffect } from 'usehooks-ts'23const COLOR_SCHEME_QUERY = '(prefers-color-scheme: dark)'45interface UseDarkModeOutput {6 isDarkMode: boolean7 toggle: () => void8 enable: () => void9 disable: () => void10}1112function useDarkMode(defaultValue?: boolean): UseDarkModeOutput {13 const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY)14 const [isDarkMode, setDarkMode] = useLocalStorage<boolean>(15 'usehooks-ts-dark-mode',16 defaultValue ?? isDarkOS ?? false,17 )1819 // Update darkMode if os prefers changes20 useUpdateEffect(() => {21 setDarkMode(isDarkOS)22 // eslint-disable-next-line react-hooks/exhaustive-deps23 }, [isDarkOS])2425 return {26 isDarkMode,27 toggle: () => setDarkMode(prev => !prev),28 enable: () => setDarkMode(true),29 disable: () => setDarkMode(false),30 }31}3233export default useDarkMode
Usage
1import { useDarkMode } from 'usehooks-ts'23export default function Component() {4 const { isDarkMode, toggle, enable, disable } = useDarkMode()56 return (7 <div>8 <p>Current theme: {isDarkMode ? 'dark' : 'light'}</p>9 <button onClick={toggle}>Toggle</button>10 <button onClick={enable}>Enable</button>11 <button onClick={disable}>Disable</button>12 </div>13 )14}
See a way to make this page better?
Edit there »