@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

``bash
$ npm i @rbnd/react-dark-mode


Or Yarn

`

Usage

$3

`jsx
import { DarkModeProvider } from "@rbnd/react-dark-mode"

const App = () => {

// ...

return (

{/ Your other components /}

)
}
`

$3

`jsx
import { useDarkMode } from "@rbnd/react-dark-mode"

const Settings = () => {
const { mode, setMode } = useDarkMode()

return (
onClick={() => setMode("dark")}
active={mode === "dark"}>
Dark

)
}
`

$3

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;
}
`

$3

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!