π A React Hook for adding a dark / night mode to your site inspired by darkreader
Live Demo β¨ https://react-darkreader.vercel.app
Install with yarn
yarn add react-darkreaderOr you can
npm install react-darkreaderOr inject the script at your page by jsdelivr CDN
<script src="https://cdn.jsdelivr.net/npm/react-darkreader@latest/dist/index.min.js"></script>You can import the darkmode as a react component.
import React from 'react';
import Darkreader from 'react-darkreader';
export default () => <Darkreader />;You can also create darkmode by the react hook useDarkreader
import React from 'react';
import { Switch, useDarkreader } from 'react-darkreader';
export default () => {
const [isDark, { toggle }] = useDarkreader(false);
return <Switch checked={isDark} onChange={toggle} />;
};<Darkreader
defaultDarken
theme={/** Theme options **/}
fixes={/** Contains fixes for the generated theme **/}
onChange={isDark => {
/** Callback for change **/
}}
/>const [isDark, { toggle, collectCSS }] = useDarkreader(defaultDarken, theme?, fixes?)with a toggle button as ui.
<Switch checked={isDark} onChange={toggle} />| Params | Description | Type |
|---|---|---|
| isDark | The status of current darkmode, support true, false |
boolean |
| toggle | The function for toggling the darkmode. | () => void |
| collectCSS | The async function for collecting the css of darkmode. | async () => Promise<string> |
| Params | Description | Type | Default |
|---|---|---|---|
| defaultDarken | The default status of the darkreader | boolean |
false |
| theme | The options of darkreader Theme refered to index.d.ts β | Partial<Theme> |
- |
| fixes | Contains fixes for the generated theme refered to index.d.ts β | DynamicThemeFix |
- |
- add the material design styling in switch
- followSystemColorScheme
- localstorge
- playground for editing the config online
Install dependencies,
$ npm iStart the dev server,
$ npm startBuild documentation,
$ npm run docs:buildBuild library via father-build,
$ npm run buildThanks goes to these people (emoji key):
 Turkyden π»ππ |
 chenshuai2144 π»π |
 KnowsCount π |
