RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.npmjs.com/package/react-darkreader below:

react-darkreader - npm

English | ç®ä½ä¸æ

React Darkreader

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

Live Demo â¨ https://react-darkreader.vercel.app

Getting Started

Install with yarn

yarn add react-darkreader

Or you can

npm install react-darkreader

Or inject the script at your page by jsdelivr CDN

<script src="https://cdn.jsdelivr.net/npm/react-darkreader@latest/dist/index.min.js"></script>

ð 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 checked={isDark} onChange={toggle} />;
};

ð API Component

<Darkreader
  defaultDarken
  theme={/** Theme options **/}
  fixes={/** Contains fixes for the generated theme **/}
  onChange={isDark => {
    /** Callback for change **/
  }}
/>

Hook

const [isDark, { toggle, collectCSS }] = useDarkreader(defaultDarken, theme?, fixes?)

with a toggle button as ui.

<Switch checked={isDark} onChange={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 theme The options of darkreader Theme refered to index.d.ts â Partial<Theme> - fixes Contains fixes for the generated theme refered to index.d.ts â DynamicThemeFix - ð¢ Coming Soon

[x] add the material design styling in switch
[ ] followSystemColorScheme
[ ] localstorge
[ ] playground for editing the config online

ð¨ Contribute

Install dependencies,

Start the dev server,

Build documentation,

Build library via father-build,

ð¥ Who is using

More here â Welcome to submit.

â¤ï¸ Contributors

Thanks goes to these people:

Please Feel free to enjoy and participate in open source!

License

MIT

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4