Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Turkyden/react-darkreader

🌓 A React Hook for adding a dark / night mode to your site.
https://github.com/Turkyden/react-darkreader

dark-mode dark-mode-switch dark-theme darkmode darkreader hook night-mode react-components react-hooks stargazers

Last synced: 3 months ago
JSON representation

🌓 A React Hook for adding a dark / night mode to your site.

Host: GitHub
URL: https://github.com/Turkyden/react-darkreader
Owner: turkyden
License: mit
Created: 2020-11-24T03:53:25.000Z (about 4 years ago)
Default Branch: main
Last Pushed: 2023-04-13T10:25:53.000Z (almost 2 years ago)
Last Synced: 2024-10-04T16:07:18.416Z (3 months ago)
Topics: dark-mode, dark-mode-switch, dark-theme, darkmode, darkreader, hook, night-mode, react-components, react-hooks, stargazers
Language: TypeScript
Homepage: http://react-darkreader.turkyden.com
Size: 1.4 MB
Stars: 280
Watchers: 5
Forks: 21
Open Issues: 8
Metadata Files:
- Readme: README.md
- Changelog: changelog.config.js
- License: LICENSE

Awesome Lists containing this project

fucking-awesome-react-hooks - `react-darkreader`
awesome-react-hooks-cn - `react-darkreader`
awesome-react-components - react-darkreader - A React Hook for adding a dark / night mode to your site inspired by darkreader. (UI Components / Miscellaneous)
awesome-react-hooks - `react-darkreader`
fucking-awesome-react-components - react-darkreader - A React Hook for adding a dark / night mode to your site inspired by darkreader. (UI Components / Miscellaneous)
awesome-react-hooks - `react-darkreader`
awesome-react-components - react-darkreader - 🌓 A React Hook for adding a dark / night mode to your site inspired by darkreader. (UI Components / Miscellaneous)
awesome-react-components - react-darkreader - A React Hook for adding a dark / night mode to your site inspired by darkreader. (UI Components / Miscellaneous)

README

        English | [简体中文](./README_cn-zh.md)



  



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](https://www.jsdelivr.com/)

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

### Component

```tsx | pure

 {

    /** Callback for change **/

  }}

/>

```

### Hook

```typescript | pure

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

```

with a toggle button as ui.

```tsx | pure

```

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

### 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 →](https://github.com/darkreader/darkreader/blob/13c93a995cde0b933580174106897bb1d13f53b4/index.d.ts#L41)         | `Partial`  | -       |

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

```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](https://procomponents.ant.design/) | [Ant Design Pro Components Dark](https://procomponents.ant.design/) |

| :------------------------------------------------------------------: | :-----------------------------------------------------------------: |

|    ![Procomponents Light](./screenshot/pro-components_light.png)     |     ![Procomponents Dark](./screenshot/pro-components_dark.png)     |

[More here →]() Welcome to submit.

## ❤️ Contributors

Thanks goes to these people:

![Contributors](https://contrib.rocks/image?repo=Turkyden/react-darkreader)

Please Feel free to enjoy and participate in open source!

## ⭐ Stargazers

Thanks for your star!

[![Stargazers repo roster for @Turkyden/react-darkreader](https://reporoster.com/stars/Turkyden/react-darkreader)](https://github.com/Turkyden/react-darkreader/stargazers)

## ✨ Follow Me

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



## License

[MIT](https://github.com/Turkyden/react-darkreader/blob/main/LICENSE)