@fisch0920/use-dark-mode (英语)

注:这是叉子使用- 暗模式以多诺万这为反应17和18增加了一些急需的维护支持.

习惯反应钩帮助您执行应用程序的“暗模式”组件. 用户设置持续到 localStorage。。。 .

它吗? 打开它 GitHub 图像

usedarkmode-small

useDarkMode 工作方式有两种:

将 CSS 类设置在您指定的任意元素上( 默认为 document.body) (中文(简体) ). 然后设置您的 CSS 以显示基于选择器存在的不同视图。例如,在演示应用中会使用以下CSS来缓解暗模式/出暗模式的背景颜色.
```
body.light-mode {
  background-color: #fff;
  color: #333;
  transition: background-color 0.3s ease;
}
body.dark-mode {
  background-color: #1a1919;
  color: #999;
}
```
如果您不使用全局类, 您可以指定一个 onChange 处理器,并自己负责执行向暗模式的切换.

2.x版本中新建

useDarkMode 目前在休会期间一直持续。它将用户设置存储于 localStorage。。。 .
它与所有其他模式状态共享 useDarkMode 组件.
它与所有其他标签/浏览器窗口共享暗模式状态.
初始暗模式是从系统询问的. 注意: 这需要一个支持 prefers-color-scheme: dark 媒体查询 (单位:千美元)目前为Chrome、Firefox、Safari和边缘(中文(简体) ) 和一个支持暗模式的系统,如macOS Mojave.
更改系统暗模式状态也会改变状态 useDarkMode (即,在系统中被更改为光模式将会在您的app中被更改为光模式).
在2.2及以上版本中支持服务器侧渲染(SSR).

所需经费

用于 @fisch0920/use-dark-mode,必须使用 [email protected] 或更多,包括虎克.

安装

$ npm i @fisch0920/use-dark-mode

使用量

const darkMode = useDarkMode(initialState, darkModeConfig);

参数

你通过 useDarkMode a 一个 initialState (布尔指定是否为暗模式) 和可选 darkModeConfig 对象。配置对象可能包含以下密钥.

密钥	说明
`classNameDark`	应用之类. 默认 = `dark-mode`。。。 .
`classNameLight`	应用之类. 默认 = `light-mode`。。。 .
`element`	应用类名的元素。默认 = `document.body`。。。 .
`onChange`	当暗模式值改变,并安全访问 DOM(即从内部调用)时,该函数将被调用 `useEffect`) (中文(简体) ). 如果您指定 `onChange` 接下来 `classNameDark`, (中文(简体) ), `classNameLight`,以及 `element` 被忽略(即DOM上没有自动设置课). 你完全可以控制着!
`storageKey`	用于 `storageProvider` 以坚持暗模式值。如果您指定了 `null`没有什么会坚持下去。默认 = `darkMode`。。。 .
`storageProvider`	储取供养. 默认 = `localStorage`。您通常不需要改变此值.

返回对象

A 类 darkMode 对象随以下属性返回.

密钥	说明
`value`	包含当前暗模式状态的布尔 .
`enable()`	一个允许您设置暗模式的函数 `true`。。。 .
`disable()`	一个允许您设置暗模式的函数 `false`。。。 .
`toggle()`	一个允许您切换暗模式的函数 .

注意,因为方法不需要任何参数, 你可以叫它们从一个可怕的 onClick 按钮中的处理器, 例如 (即不需要羊肉达功能).

示例

这里有一个简单的组件使用 useDarkMode 以提供暗模式切换控制. 如果选择了暗模式, CSS 类 dark-mode 适用于 document.body 并删除当脱选时.

import React from 'react';
import useDarkMode from '@fisch0920/use-dark-mode';

import Toggle from './Toggle';

const DarkModeToggle = () => {
  const darkMode = useDarkMode(false);

  return (
    <div>
      <button type="button" onClick={darkMode.disable}>
        ☀
      </button>
      <Toggle checked={darkMode.value} onChange={darkMode.toggle} />
      <button type="button" onClick={darkMode.enable}>
        ☾
      </button>
    </div>
  );
};

export default DarkModeToggle;

那个闪光!

如果您的 CSS 设置为默认为光模式, 但用户选择了暗模式, 下一次他们访问你的应用程序, 他们将进入黑暗模式. 然而,用户会在应用程序启动前看到闪光模式财务报告和审定财务报表 useDarkMode 名为.

为了防止这种情况,我加入了一些香草JavaScript,你可以插入到你的 index.html 刚刚之后 <body> 标签。在一个名为无倒数.js.txt。。。 . 您可以将该文件的内容插入到 <script> 标记或自动化在您的建设过程中.

注意,如果您更改了任何默认,例如: storageKey 或者说 classNameDark 例如 noflash.js 文件需要用相同的数值来修改.

盖茨比

Gatsby 用户可以发挥杠杆作用 gatsby-plugin-use-dark-mode 输入 noflash.js 给你的.

下一个.js

接下来,js使用复制 noflash.js.txt 给您的 public 文件夹( e)public/noflash.js)然后创建一个 _document.js 并包含脚本 在此之前 <Main />。。。 .

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head />
        <body>
          <script src="noflash.js" />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

许可证

麻省理工学院 有执照

贡献者

感谢这些伟大的人emoji 密钥:

_西多纳冯 🚇 ⚠️ 💡 🤔 🚧 👀 🔧 💻	_{卡尔伯格·韦斯特} 🤔	_{马特乌什·布尔津斯基} 💻	_{贾斯汀·霍尔} 💻	_{杰里米,你好吗} 📓 🐛	_{亚诺什·里贝塞尔} 📖	_{安德鲁·利索夫斯基} 📖
_{豪尔赫·冈萨雷斯} 💻