Getting Started

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

Live Demo ✨ react-darkreader.vercel.app

📦 Install

yarn add react-darkreader

Or you can:

npm install react-darkreader

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

📔 API

Component

<Darkreader
  defaultDarken
  options={
    brightness: 100,
    contrast: 90,
    sepia: 10
  }
/>

Hook

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

with a toggle button as ui.

<Switch isDark={isDark} onToggle={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

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

Start the dev server,

$ npm start

Build documentation,

$ npm run docs:build

Build library via father-build,

$ npm run build

License

MIT