π A React Hook for adding a dark / night mode to your site inspired by darkreader
Live Demo β¨ https://react-darkreader.vercel.app
yarn add react-darkreader
Or you can:
npm install react-darkreader
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} />;
};
<Darkreader
defaultDarken
options={
brightness: 100,
contrast: 90,
sepia: 10
}
/>
const [isDark, toggle, collectCSS] = useDarkreader(defaultDarken: boolean, options?: Options);
with a toggle button as ui.
<Switch isDark={isDark} onToggle={toggle} />
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 | Description | Type | Default |
---|---|---|---|
defaultDarken | The default status of the darkreader | boolean |
false |
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 |
- followSystemColorScheme
- localstorge
- playground for editing the config online
Install dependencies,
$ npm i
Start the dev server,
$ npm start
Build documentation,
$ npm run docs:build
Build library via father-build
,
$ npm run build