@rbnd/react-dark-mode
Inspired by use-dark-mode. And after being frustrated by it's shortcomings, @rbnd/react-dark-mode was created.
How it works
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!
Example
Demo example project, the source code can be found in example directory of this repository.
Installation
$ npm i @rbnd/react-dark-mode
# Or Yarn
$ yarn add @rbnd/react-dark-mode
# Or pnpm
$ pnpm add @rbnd/react-dark-mode
Usage
1. Add provider to the root of your app
import { DarkModeProvider } from "@rbnd/react-dark-mode"
const App = () => {
// ...
return (
<DarkModeProvider>
{/* Your other components */}
</DarkModeProvider>
)
}2. Change modes
import { useDarkMode } from "@rbnd/react-dark-mode"
const Settings = () => {
const { mode, setMode } = useDarkMode()
return (
<Button
onClick={() => setMode("dark")}
active={mode === "dark"}>
Dark
</Button>
)
}3. Implement styles
Class name will be applied to the html element.
.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;
}4. Get rid of the flash
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 <head>.
<html>
<head>
<!-- ... -->
<script src="/noflash.min.js"></script>
</head>
<body>
</body>
</html>Created by rbnd.studio. Check out Atmos our tool for creating professional color palettes, hey it's free!