English | ็ฎไฝไธญๆ
๐ 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-darkreader
Or you can
npm install react-darkreader
Or 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 i
Start the dev server,
$ npm start
Build documentation,
$ npm run docs:build
Build library via father-build
,
$ npm run build
Ant Design Pro Components Light | Ant Design Pro Components Dark |
---|---|
More here โ Welcome to submit.
Thanks goes to these people:
Please Feel free to enjoy and participate in open source!
Thanks for your star!