Awesome Open Source
Awesome Open Source

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/[email protected]/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

  • [x] 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

❤️ Contributors

Thanks goes to these people (emoji key):


Turkyden

💻📖🚇⚠️

chenshuai2144

💻🚇⚠️

KnowsCount

📖

License

MIT


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
typescript (10,847) 
react-components (201) 
react-hooks (194) 
dark-theme (174) 
dark-mode (68) 
night-mode (23) 

Find Open Source By Browsing 7,000 Topics Across 59 Categories

Advertising 📦 10
All Projects
Application Programming Interfaces 📦 124
Applications 📦 192
Artificial Intelligence 📦 78
Blockchain 📦 73
Build Tools 📦 113
Cloud Computing 📦 80
Code Quality 📦 28
Collaboration 📦 32
Command Line Interface 📦 49
Community 📦 83
Companies 📦 60
Compilers 📦 63
Computer Science 📦 80
Configuration Management 📦 42
Content Management 📦 175
Control Flow 📦 213
Data Formats 📦 78
Data Processing 📦 276
Data Storage 📦 135
Economics 📦 64
Frameworks 📦 215
Games 📦 129
Graphics 📦 110
Hardware 📦 152
Integrated Development Environments 📦 49
Learning Resources 📦 166
Legal 📦 29
Libraries 📦 129
Lists Of Projects 📦 22
Machine Learning 📦 347
Mapping 📦 64
Marketing 📦 15
Mathematics 📦 55
Media 📦 239
Messaging 📦 98
Networking 📦 315
Operating Systems 📦 89
Operations 📦 121
Package Managers 📦 55
Programming Languages 📦 245
Runtime Environments 📦 100
Science 📦 42
Security 📦 396
Social Media 📦 27
Software Architecture 📦 72
Software Development 📦 72
Software Performance 📦 58
Software Quality 📦 133
Text Editors 📦 49
Text Processing 📦 136
User Interface 📦 330
User Interface Components 📦 514
Version Control 📦 30
Virtualization 📦 71
Web Browsers 📦 42
Web Servers 📦 26
Web User Interface 📦 210