dark-mode-react-hook
v1.1.0
Published
React custom hook to apply dark mode to any website
Downloads
1
Readme
React Hook Dark Mode
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:
html {
filter: invert(1) hue-rotate(180deg);
}
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.
Installation
npm i --save react-hook-dark-mode
# or
yarn add react-hook-dark-modeUsage
import useDarkMode from "react-hook-dark-mode";
function darkModeToggle() {
const [darkMode, setDarkMode] = useDarkMode();
return (
<button onClick={() => setDarkMode(!darkMode)}>
{darkMode ? 🌙 : ☀️}
</button>
)
}Options
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 |