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

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>

🚀 Usage

You can import the darkmode as a react component.

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

export default () => <Darkreader />;

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 <Switch checked={isDark} onChange={toggle} />;
};

📔 API

Component

```tsx | pure

<Darkreader defaultDarken theme={/** Theme options **/} fixes={/** Contains fixes for the generated theme **/} onChange={isDark => { / Callback for change / }} />

### Hook

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

with a toggle button as ui.

```tsx | pure

<Switch checked={isDark} onChange={toggle} />

### Result

| 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

| Params        | Description                                                                                                                                                                   | Type              | Default |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ------- |
| defaultDarken | The default status of the darkreader                                                                                                                                          | `boolean`         | false   |
| theme         | The options of darkreader Theme [refered to index.d.ts &rarr;](https://github.com/darkreader/darkreader/blob/13c93a995cde0b933580174106897bb1d13f53b4/index.d.ts#L41)         | `Partial<Theme>`  | -       |
| fixes         | Contains fixes for the generated theme [refered to index.d.ts &rarr;](https://github.com/darkreader/darkreader/blob/13c93a995cde0b933580174106897bb1d13f53b4/index.d.ts#L121) | `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,

$ npm start

Build documentation,

$ npm run docs:build

Build library via father-build,

$ npm run build

🥇 Who is using

Ant Design Pro Components Light	Ant Design Pro Components Dark

More here → Welcome to submit.

❤️ Contributors

Thanks goes to these people:

Please Feel free to enjoy and participate in open source!

License

MIT