turkyden / react-darkreader Goto Github PK

View Code? Open in Web Editor NEW

276.0 5.0 20.0 1.44 MB

🌓 A React Hook for adding a dark / night mode to your site.

Home Page: http://react-darkreader.turkyden.com

License: MIT License

TypeScript 83.83% CSS 4.76% JavaScript 11.41%

dark-theme dark-mode darkreader night-mode react-components react-hooks dark-mode-switch darkmode hook stargazers

react-darkreader's Introduction

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

add the material design styling in switch
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

🥇 Who is using

Ant Design Pro Components Light	Ant Design Pro Components Dark

More here → Welcome to submit.

❤️ Contributors

Thanks goes to these people:

Please Feel free to enjoy and participate in open source!

⭐ Stargazers

Thanks for your star!

✨ Follow Me

这是作者的微信「视频号」，每天分享一些有趣的 SaaS 软件产品，欢迎关注 ~

License

MIT

react-darkreader's People

Contributors

Stargazers

Watchers

react-darkreader's Issues

Problem in NextJS

TypeError: useDarkreader is not a function or its return value is not iterable

I am getting this error on a NextJS project

Error on Build React Project.

When app runs in localhost, works fine \õ/
But when i deploy(Netlify or Surge), doesn't work on darkmode!

Localhost:

Production Domain:

可以把ahooks和antd解耦吗？

源码没看到有用到antd，ahooks也仅仅用到了一个比较简单的，拉下来跟我项目里的antd替换dayjs方案起了冲突

original lib darkreader relies on inline scripting, is it the same?

We don't like to have inline scripting as Content Security Policy best practices,
I tried to successfully use darkreader in my project but I receive this error:
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).

Do you have this issue the same with react-darkreader.

thanks!

切換暗模式的单击事件很久

无论采用那种方式，单击切换暗黑模式要等好几秒才反应过来，这是一个bug吗？
浏览器的提示：
[Violation] 'click' handler took 1502ms

如何设置默认的模式，defaultDarken只能控制switch的默认值，没法控制页面的浅色或暗色模式

没人用这个库了么？
如何设置默认的模式，defaultDarken只能控制switch的默认值，没法控制页面的浅色或暗色模式

可以在切换的时候加loading吗？

因为在项目中使用了tailwind，然后在正常模式切换到暗黑模式时，要等很长时间才能切换完成，体验不是很好
所以希望能有个loading，或者转换开始、转换完成的事件
谢谢

Production Build Error using ViteJS

I am using ViteJS, which using Rollup for production build. (instead of create-react-app - Webpack)

Works well in development, I absolutely love it.
However, when building for production, and running in localhost, browser console shows this

Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Any help is appreciated, not sure if it is due to Rollup giving this error??

Below is my code,

React Dark Reader only Work Locally

Hi,
I have installed The React Dark Reader package, locally it works fine, but when deploying it online, doesn't work properly.
Please see below the screenshot:

Any suggestions on how to solve the issue?

Thanks in advance,

npm install error

Hi, I'm using vite.js with react and I have an issue with installing this package, this is the error:

# npm resolution error report

2022-09-05T09:50:55.491Z

While resolving: my-vue-app@0.0.0
Found: react@18.2.0
node_modules/react
  react@"^18.2.0" from the root project

Could not resolve dependency:
peer react@"^16.8.6" from react-darkreader@1.5.6
node_modules/react-darkreader
  react-darkreader@"*" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{
  "code": "ERESOLVE",
  "current": {
    "name": "react",
    "version": "18.2.0",
    "whileInstalling": {
      "name": "my-vue-app",
      "version": "0.0.0",
      "path": "/home/jckpt/js/league/my-vue-app"
    },
    "location": "node_modules/react",
    "isWorkspace": false,
    "dependents": [
      {
        "type": "prod",
        "name": "react",
        "spec": "^18.2.0",
        "from": {
          "location": "/home/jckpt/js/league/my-vue-app"
        }
      }
    ]
  },
  "currentEdge": {
    "type": "prod",
    "name": "react",
    "spec": "^18.2.0",
    "from": {
      "location": "/home/jckpt/js/league/my-vue-app"
    }
  },
  "edge": {
    "type": "peer",
    "name": "react",
    "spec": "^16.8.6",
    "error": "INVALID",
    "from": {
      "name": "react-darkreader",
      "version": "1.5.6",
      "whileInstalling": {
        "name": "my-vue-app",
        "version": "0.0.0",
        "path": "/home/jckpt/js/league/my-vue-app"
      },
      "location": "node_modules/react-darkreader",
      "isWorkspace": false,
      "dependents": [
        {
          "type": "prod",
          "name": "react-darkreader",
          "spec": "*",
          "from": {
            "location": "/home/jckpt/js/league/my-vue-app"
          }
        }
      ]
    }
  },
  "strictPeerDeps": false,
  "force": false
}

import Darkreader from 'react-darkreader';
import { useModel } from 'umi';


export default () => {
  const { setInitialState } = useModel('@@initialState');
  return (
    <>
      <Darkreader
        theme={{
          brightness: 100,
          contrast: 90,
          sepia: 10,
        }}
        onChange={(isDark: any) => { setInitialState((s) => ({ ...s, isDark })) }}
        defaultDarken={false}
      />
    </>
  );
};

控制台报

Error: Embedded Dark Reader cannot access a cross-origin resource https://gw.alipayobjects.com/zos/antfincdn/DehQfMbOJb/icon.svg Overview your URLs and CORS policies or use DarkReader.setFetchMethod(fetch: (url) => Promise<Response>)). See if using DarkReader.setFetchMethod(window.fetch) before DarkReader.enable() works.

"react": "^17.0.0",
"name": "react-darkreader",
"version": "1.5.6",

请问如何解决这个问题呢，谢谢