Getting Started

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

The Live Demo ✨ react – darkreader. Vercel. App

📦 Install

yarn add react-darkreader
Copy the code

Or you can:

npm install react-darkreader
Copy the code

🚀 Usage

You can import the darkmode as a react component.

import React from 'react';
import Darkreader from 'react-darkreader';

export default() = ><Darkreader />;
Copy the code

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 isDark={isDark} onToggle={toggle} />;
};
Copy the code

📔 API

Component

<Darkreader
  defaultDarken
  options={
    brightness: 100.contrast: 90.sepia: 10} / >Copy the code

Hook

const [isDark, toggle, collectCSS] = useDarkreader(defaultDarken: boolean, options? : Options);Copy the code

with a toggle button as ui.

<Switch isDark={isDark} onToggle={toggle} />
Copy the code

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

Options

Params Description Type Default
brightness The brightness properties of darkmode number 100
contrast The contrast properties of darkmode number 90
sepia The sepia properties of darkmode number 10

🔢 “Coming Soon

  • followSystemColorScheme
  • localstorge
  • playground for editing the config online

🔨 Contribute

Install dependencies,

$ npm i
Copy the code

Start the dev server,

$ npm start
Copy the code

Build documentation,

$ npm run docs:build
Copy the code

Build library via father-build,

$ npm run build
Copy the code

License

MIT