/react-darkreader

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

Primary LanguageTypeScriptMIT LicenseMIT

English | 简体中文

react-darkreader

React Darkreader

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

npm npm dumi license jsdelivr

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.

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} />;
};

📔 API

Component

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

Hook

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

with a toggle button as ui.

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

🔢 Coming Soon

  • add the material design styling in switch
  • followSystemColorScheme
  • localstorge
  • playground for editing the config online

🔨 Contribute

Install dependencies,

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

Stargazers repo roster for @Turkyden/react-darkreader

✨ Follow Me

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

License

MIT