useDarkMode()

1// See: https://usehooks-ts.com/react-hook/use-local-storage
2import { useLocalStorage } from '../useLocalStorage'
3// See: https://usehooks-ts.com/react-hook/use-media-query
4import { useMediaQuery } from '../useMediaQuery'
5// See: https://usehooks-ts.com/react-hook/use-update-effect
6import { useUpdateEffect } from '../useUpdateEffect'
7
8const COLOR_SCHEME_QUERY = '(prefers-color-scheme: dark)'
9
10interface UseDarkModeOutput {
11  isDarkMode: boolean
12  toggle: () => void
13  enable: () => void
14  disable: () => void
15}
16
17function 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  )
23
24  // Update darkMode if os prefers changes
25  useUpdateEffect(() => {
26    setDarkMode(isDarkOS)
27    // eslint-disable-next-line react-hooks/exhaustive-deps
28  }, [isDarkOS])
29
30  return {
31    isDarkMode,
32    toggle: () => setDarkMode(prev => !prev),
33    enable: () => setDarkMode(true),
34    disable: () => setDarkMode(false),
35  }
36}
37
38export default useDarkMode

1import React from 'react'
2
3import { useDarkMode } from 'usehooks-ts'
4
5export default function Component() {
6  const { isDarkMode, toggle, enable, disable } = useDarkMode()
7
8  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}