English | 简体中文

React Darkreader

🌓 A React Hook for adding a dark / night mode to your site inspired by darkreader

Live Demo ✨ https://react-darkreader.vercel.app

Getting Started

Install with yarn

``bash
yarn add react-darkreader
`

Or you can

`bash
npm install react-darkreader
`

Or inject the script at your page by jsdelivr CDN

`html

`

🚀 Usage

You can import the darkmode as a react component.

`tsx | pure
import React from 'react';
import Darkreader from 'react-darkreader';

export default () => ;
`

You can also create darkmode by the react hook useDarkreader

`tsx | pure
import React from 'react';
import { Switch, useDarkreader } from 'react-darkreader';

export default () => {
const [isDark, { toggle }] = useDarkreader(false);

return ;
};
`

📔 API

$3

`tsx | pure
defaultDarken
theme={/ Theme options /}
fixes={/ Contains fixes for the generated theme /}
onChange={isDark => {
/ Callback for change /
}}
/>
`

$3

`typescript | pure
const [isDark, { toggle, collectCSS }] = useDarkreader(defaultDarken, theme?, fixes?)
`

with a toggle button as ui.

`tsx | pure

`

$3

| 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 |

$3

| 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 | - |
| fixes | Contains fixes for the generated theme refered to index.d.ts → | DynamicThemeFix | - |

🔢 Coming Soon

- [x] add the material design styling in switch
- [ ] followSystemColorScheme
- [ ] localstorge
- [ ] playground for editing the config online

🔨 Contribute

Install dependencies,

`bash
$ npm i
`

Start the dev server,

`bash
$ npm start
`

Build documentation,

`bash
$ npm run docs:build
`

Build library via father-build,

`bash
$ npm run build
``

🥇 Who is using

| Ant Design Pro Components Light | Ant Design Pro Components Dark |
| :------------------------------------------------------------------: | :-----------------------------------------------------------------: |
| !Procomponents Light | !Procomponents Dark |

[More here →]() Welcome to submit.

❤️ Contributors

Thanks goes to these people:

!Contributors

Please Feel free to enjoy and participate in open source!

⭐ Stargazers

Thanks for your star!


✨ Follow Me

这是作者的微信「视频号」，每天分享一些有趣的 SaaS 软件产品，欢迎关注 ~

License

MIT