react-darkreader's Introduction

Getting Started

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

Live Demo ✨ https://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