Getting Started

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