React hook for switching between light, dark and system color mode.
npm install @rbnd/react-dark-modeInspired by use-dark-mode. And after being frustrated by it's shortcomings, @rbnd/react-dark-mode was created.

This package will take care of switching between light, dark and system preference. It will also get rid of the annoying flash between dark-light mode you get when opening a webpage. Supports typescript out of the box!
Demo example project, the source code can be found in example directory of this repository.
``bash
$ npm i @rbnd/react-dark-modeOr Yarn
$ yarn add @rbnd/react-dark-modeOr pnpm
$ pnpm add @rbnd/react-dark-mode
`
`jsx
import { DarkModeProvider } from "@rbnd/react-dark-mode"
const App = () => {
// ...
return (
{/ Your other components /}
)
}
`
`jsx
import { useDarkMode } from "@rbnd/react-dark-mode"
const Settings = () => {
const { mode, setMode } = useDarkMode()
return (
onClick={() => setMode("dark")}
active={mode === "dark"}>
Dark
)
}
`
Class name will be applied to the html element.
`css`
.light-mode {
color-scheme: light;
background-color: white;
color: black;
}
.dark-mode {
/ Don't forget the color-scheme css attribute. This will avoid light scrollbars in dark mode. /
color-scheme: dark;
background-color: black;
color: white;
}
Copy the noflash.min.js from node_modules/@rbnd/react-dark-mode/src/noflash.min.js to your public folder and add it as a script to your
.`html
``---
Created by rbnd.studio. Check out Atmos our tool for creating professional color palettes, hey it's free!