@rbnd/react-dark-mode
TypeScript icon, indicating that this package has built-in type declarations

2.0.1 • Public • Published

@rbnd/react-dark-mode

Inspired by use-dark-mode. And after being frustrated by it's shortcomings, @rbnd/react-dark-mode was created.

npm version

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!

Package Sidebar

Install

npm i @rbnd/react-dark-mode

Weekly Downloads

176

Version

2.0.1

License

MIT

Unpacked Size

161 kB

Total Files

20

Last publish

Collaborators

  • vojtechvidra