useDarkMode

Custom hook that returns the current state of the dark mode.

Usage

import { useDarkMode } from 'usehooks-ts'  export default function Component() {  const { isDarkMode, toggle, enable, disable } = useDarkMode()   return (  <div>  <p>Current theme: {isDarkMode ? 'dark' : 'light'}</p>  <button onClick={toggle}>Toggle</button>  <button onClick={enable}>Enable</button>  <button onClick={disable}>Disable</button>  </div>  ) }

API

▸ useDarkMode(options?): DarkModeReturn

Custom hook that returns the current state of the dark mode.

Parameters

Name	Type	Description
`options?`	`DarkModeOptions`	The initial value of the dark mode, default `false`.

Returns

DarkModeReturn

An object containing the dark mode's state and its controllers.

Type aliases

Ƭ DarkModeOptions: Object

The hook options.

Type declaration

Name	Type	Description
`defaultValue?`	`boolean`	The initial value of the dark mode. `Default` `ts false`
`initializeWithValue?`	`boolean`	If `true` (default), the hook will initialize reading `localStorage`. In SSR, you should set it to `false`, returning the `defaultValue` or `false` initially. `Default` `ts true`
`localStorageKey?`	`string`	The key to use in the local storage. `Default` `ts 'usehooks-ts-dark-mode'`

Ƭ DarkModeReturn: Object

The hook return type.

Type declaration

Name	Type	Description
`disable`	() => `void`	Function to disable the dark mode.
`enable`	() => `void`	Function to enable the dark mode.
`isDarkMode`	`boolean`	The current state of the dark mode.
`set`	(`value`: `boolean`) => `void`	Function to set a specific value to the dark mode.
`toggle`	() => `void`	Function to toggle the dark mode.

Hook

import {  useIsomorphicLayoutEffect,  useLocalStorage,  useMediaQuery, } from 'usehooks-ts'  const COLOR_SCHEME_QUERY = '(prefers-color-scheme: dark)' const LOCAL_STORAGE_KEY = 'usehooks-ts-dark-mode'  type DarkModeOptions = {  defaultValue?: boolean  localStorageKey?: string  initializeWithValue?: boolean }  type DarkModeReturn = {  isDarkMode: boolean  toggle: () => void  enable: () => void  disable: () => void  set: (value: boolean) => void }  export function useDarkMode(options: DarkModeOptions = {}): DarkModeReturn {  const {  defaultValue,  localStorageKey = LOCAL_STORAGE_KEY,  initializeWithValue = true,  } = options   const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY, {  initializeWithValue,  defaultValue,  })  const [isDarkMode, setDarkMode] = useLocalStorage<boolean>(  localStorageKey,  defaultValue ?? isDarkOS ?? false,  { initializeWithValue },  )   // Update darkMode if os prefers changes  useIsomorphicLayoutEffect(() => {  if (isDarkOS !== isDarkMode) {  setDarkMode(isDarkOS)  }  }, [isDarkOS])   return {  isDarkMode,  toggle: () => {  setDarkMode(prev => !prev)  },  enable: () => {  setDarkMode(true)  },  disable: () => {  setDarkMode(false)  },  set: value => {  setDarkMode(value)  },  } }

useCounter useDebounceCallback