@rbnd/react-dark-mode
Advanced tools
React hook for switching between light, dark and system color mode.
Inspired 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.
$ npm i @rbnd/react-dark-mode
# Or Yarn
$ yarn add @rbnd/react-dark-mode
# Or pnpm
$ pnpm add @rbnd/react-dark-mode
import { DarkModeProvider } from "@rbnd/react-dark-mode"
const App = () => {
// ...
return (
<DarkModeProvider>
{/* Your other components */}
</DarkModeProvider>
)
}
import { useDarkMode } from "@rbnd/react-dark-mode"
const Settings = () => {
const { mode, setMode } = useDarkMode()
return (
<Button
onClick={() => setMode("dark")}
active={mode === "dark"}>
Dark
</Button>
)
}
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;
}
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!
FAQs
React hook for switching between light, dark and system color mode.
We found that @rbnd/react-dark-mode demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
175 malicious npm packages (26k+ downloads) used unpkg CDN to host redirect scripts for a credential-phishing campaign targeting 135+ organizations worldwide.
Security News
Python 3.14 adds template strings, deferred annotations, and subinterpreters, plus free-threaded mode, an experimental JIT, and Sigstore verification.
Security News
Former RubyGems maintainers have launched The Gem Cooperative, a new community-run project aimed at rebuilding open governance in the Ruby ecosystem.