useDarkMode

Use this hook to control the user dark mode preference. By default it will rely only on the users settings via css media queries. But it is also possible to override and control this behaviour.

Usage

import React from 'react';
import { useDarkMode } from '@fransvilhelm/hooks';
const Example = () => {
  const [enabled, setEnabled, isUserOverridden] = useDarkMode();
  return <p />;
};

Example

() => {
  const [enabled, setEnabled, isUserOverridden] = useDarkMode()
  return (
    <div
      style={{
        padding: '1rem',
        backgroundColor: enabled ? 'black' : 'white',
        color: enabled ? 'white' : 'black',
      }}
    >
      <form style={{ display: 'flex', flexFlow: 'column nowrap' }}>
        <label>
          <input
            type="radio"
            name="dark-mode"
            value="user"
            checked={!isUserOverridden}
            onChange={() => setEnabled(null)}
          />{' '}
          Respect user settings
        </label>
        <label>
          <input
            type="radio"
            name="dark-mode"
            value="enabled"
            checked={isUserOverridden && enabled}
            onChange={() => setEnabled(true)}
          />{' '}
          Use dark mode
        </label>
        <label>
          <input
            type="radio"
            name="dark-mode"
            value="disabled"
            checked={isUserOverridden && !enabled}
            onChange={() => setEnabled(false)}
          />{' '}
          Use light mode
        </label>
      </form>
    </div>
  )
}

() => {
  const [enabled, setEnabled, isUserOverridden] = useDarkMode()
  return (
    <div
      style={{
        padding: '1rem',
        backgroundColor: enabled ? 'black' : 'white',
        color: enabled ? 'white' : 'black',
      }}
    >
      <form style={{ display: 'flex', flexFlow: 'column nowrap' }}>
        <label>
          <input
            type="radio"
            name="dark-mode"
            value="user"
            checked={!isUserOverridden}
            onChange={() => setEnabled(null)}
          />{' '}
          Respect user settings
        </label>
        <label>
          <input
            type="radio"
            name="dark-mode"
            value="enabled"
            checked={isUserOverridden && enabled}
            onChange={() => setEnabled(true)}
          />{' '}
          Use dark mode
        </label>
        <label>
          <input
            type="radio"
            name="dark-mode"
            value="disabled"
            checked={isUserOverridden && !enabled}
            onChange={() => setEnabled(false)}
          />{' '}
          Use light mode
        </label>
      </form>
    </div>
  )
}

Parameters

useDarkMode accepts ...

Param	Type	Required	Default	Description
`className`	`string`	`false`	-	Optional class name that will be appended to the body element

Returns

useDarkMode returns a tuple with three items:

Prop	Type	Description
`enabled`	`boolean`	Indicating if dark mode should be used or not
`setEnabled`	`(enable: boolean` \| `null) => void`	Function to override dark mode preference. Call with `null` to revert back on relying on users OS settings
`isUserOverriden`	`boolean`	Flag indicating if user has overridden system settings