This package contains a React custom hook that applies dark mode to your website. It uses css filter to transform light schemes into dark themes (and viceversa). I took the idea from this post and extracted it into a single hook.
It works by injecting a global stylesheet with the following css:
body {
filter: invert(1) hue-rotate(180deg);
}
body img {
filter: invert(1) hue-rotate(180deg);
}
.no-dark-mode {
filter: invert(1) hue-rotate(180deg);
}What this css is doing is inverting the colors in the <body> and then converting all colors to their complementaries. The final result is a dark variant (or light, if the original is dark) of the theme, while more-or-less keeping the main colors.
If there is an element that you do not wish to invert (for example, a dark modal background should probably not be bright under dark-mode), you can apply the no-dark-mode class to it.
npm i --save react-hook-dark-mode
# or
yarn add react-hook-dark-modeimport useDarkMode from "react-hook-dark-mode";
function darkModeToggle() {
const [darkMode, setDarkMode] = useDarkMode();
return (
<button onClick={() => setDarkMode(!darkMode)}>
{darkMode ? 🌙 : ☀️}
</button>
)
}The hook accepts a configuration object with the following options:
| Name | Type | Description | Default |
|---|---|---|---|
| autoDetect | boolean |
Use a prefers-color-scheme media query to detect user preferences and automatically set dark mode |
true |
| defaultValue | boolean |
Apply dark mode by default | false |