use-darkreader

A React hook for integrating darkreader with persistent mode selection, inspired by react-darkreader.

Installation

npm install react-use-darkreader

Usage

import useDarkreader from 'react-use-darkreader';

function App() {
  const [isDark, { toggle, setMode }, mode] = useDarkreader();

  return (
    <div>
      <p>Current mode: {mode}</p>
      <p>Is dark: {isDark ? 'Yes' : 'No'}</p>
      <button onClick={toggle}>Toggle theme</button>
    </div>
  );
}

API

useDarkreader(defaultDarken?, theme?, fixes?, allowSystem?)

Parameters

• defaultDarken (boolean, default: false) - Initial dark mode state
• theme (object, optional) - Darkreader theme configuration
  • brightness (number, default: 100)
  • contrast (number, default: 90)
  • sepia (number, default: 10)
• fixes (object, optional) - Darkreader fixes configuration
  • invert (array)
  • css (string)
  • ignoreInlineStyle (array)
  • ignoreImageAnalysis (array)
• allowSystem (boolean, default: false) - Allow system preference mode

Returns

[isDark, actions, mode]

• isDark (boolean) - Whether dark mode is currently active
• actions (object) - Action methods
  • toggle() - Toggle between modes (light → dark → system → light)
  • setMode(mode) - Set specific mode ('light' | 'dark' | 'system')
  • collectCSS() - Export generated CSS (returns Promise)
• mode (string) - Current mode ('light' | 'dark' | 'system')

Examples

Basic Usage

import useDarkreader from 'react-use-darkreader';

function App() {
  const [isDark, { toggle }] = useDarkreader();

  return <button onClick={toggle}>Toggle Dark Mode</button>;
}

With System Preference Support

import useDarkreader from 'react-use-darkreader';

function App() {
  const [isDark, { toggle, setMode }, mode] = useDarkreader(false, null, null, true);

  return (
    <div>
      <p>Current mode: {mode}</p>
      <button onClick={toggle}>Toggle (Light/Dark/System)</button>
      <button onClick={() => setMode('light')}>Light</button>
      <button onClick={() => setMode('dark')}>Dark</button>
      <button onClick={() => setMode('system')}>System</button>
    </div>
  );
}

License

MIT