Use-react-dark-mode NPM

Simple dark mode hook with tailwind support

This custom hook makes your life easier dealing with dark mode. It's built with Typescript and compatible with tailwind's class dark mode.

It's got two styles: 1. toggle 2. selector. If you choose toggle mode then user can select light and dark mode. If you choose selector mode then user has 3 options light, dark and system. By default toggle mode selected. You can change it when you first time using hook by giving 'selector' argument to hook's function.

Usage (toggle)

First in your global.css(index.css) file craete root variables for light mode. Then make dark class and change root variables to dark versions.

index.css

:root {
  --body-bg: white; /* light version */
}

.dark {
  --body-bg: black; /* dark version */
}

body {
  background: var(--body-bg);
}

App.jsx In toggle mode you can use two properties from hook: isDark and toggle. You can call toggle function to change theme mode. isDark will change respectively.

import useDarkMode from "use-react-dark-mode";

function App() {
  const { isDark, toggle } = useDarkMode(); // toggle by defualt

  return (
    <>
      <p>Hello I'm not visible in dark mode. Try toggling</p>
      <button onClick={toggle}>toggle</button>
    </>
  );
}

Usage (selector)

Selector style uses 3 options: light, dark, system. By defualt hook uses toggle mode. To change it to selector mode you need to pass 'selector' string to hook's function call as an argument.

Then you can use 3 properties from hook. They are isDark, mode, setMode. You can't use toggle function in this case. Instead, we have now setMode. setMode accepts 3 string 'light' | 'dark' | 'system'. You can set the them to one of them. Result would be in mode property. You can always know dark or light by watching isDark property.

App.jsx

import useDarkMode from "use-react-dark-mode";

function App() {
  const { isDark, mode, setMode } = useDarkMode("selector");
  return (
    <>
      <select value={mode} onChange={e => setMode(e.target.value)}>
        <option value="light">light</option>
        <option value="dark">dark</option>
        <option value="system">system</option>
      </select>
      <p>Hello I'm not visible in dark mode. try selecting different modes.</p>
    </>
  );
}

export default App;

Tailwind

You can use two styles with tailwind toggle and selector. You just need to configure tailwind.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: "class", // set darkMode to class just it!
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};