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
1// See: https://usehooks-ts.com/react-hook/use-local-storage2import { useLocalStorage } from '../useLocalStorage'3// See: https://usehooks-ts.com/react-hook/use-media-query4import { useMediaQuery } from '../useMediaQuery'5// See: https://usehooks-ts.com/react-hook/use-update-effect6import { useUpdateEffect } from '../useUpdateEffect'78const COLOR_SCHEME_QUERY = '(prefers-color-scheme: dark)'910interface UseDarkModeOutput {11 isDarkMode: boolean12 toggle: () => void13 enable: () => void14 disable: () => void15}1617function useDarkMode(defaultValue?: boolean): UseDarkModeOutput {18 const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY)19 const [isDarkMode, setDarkMode] = useLocalStorage<boolean>(20 'usehooks-ts-dark-mode',21 defaultValue ?? isDarkOS ?? false,22 )2324 // Update darkMode if os prefers changes25 useUpdateEffect(() => {26 setDarkMode(isDarkOS)27 // eslint-disable-next-line react-hooks/exhaustive-deps28 }, [isDarkOS])2930 return {31 isDarkMode,32 toggle: () => setDarkMode(prev => !prev),33 enable: () => setDarkMode(true),34 disable: () => setDarkMode(false),35 }36}3738export default useDarkMode
Usage
1import React from 'react'23import { useDarkMode } from 'usehooks-ts'45export default function Component() {6 const { isDarkMode, toggle, enable, disable } = useDarkMode()78 return (9 <div>10 <p>Current theme: {isDarkMode ? 'dark' : 'light'}</p>11 <button onClick={toggle}>Toggle</button>12 <button onClick={enable}>Enable</button>13 <button onClick={disable}>Disable</button>14 </div>15 )16}
See a way to make this page better?
Edit there »