# @fisch0920/use-dark-mode 中文文档
规范地址：https://npmcn.com/package/%40fisch0920/use-dark-mode/
版本：2\.4\.0
npm 元数据更新时间：2022-03-31T03:46:11.335Z
中文译文更新时间：2026-11-14T20:29:05.281Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40fisch0920/use-dark-mode
原文对照：https://npmcn.com/package/%40fisch0920/use-dark-mode/?lang=original
项目主页：https://github.com/transitive-bullshit/use-dark-mode#readme
源码仓库：https://github.com/transitive-bullshit/use-dark-mode
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：22.6 kB，8 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react \>=16\.8
- 首次发布：2022-03-31T03:32:31.824Z
- 最新版本发布：2022-03-31T03:46:11.264Z
- 近 30 天下载量：4088（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：2（近 12 个月 0 个）
## 中文简介
一个自定义的回击钩来帮助您执行"暗模式"组件.
## 安装
```sh
npm install @fisch0920/use-dark-mode
```
也可以使用：`pnpm add @fisch0920/use-dark-mode`、`yarn add @fisch0920/use-dark-mode`、`bun add @fisch0920/use-dark-mode`
## README
# @fisch0920/use-dark-mode (英语)
> 注:这是叉子 [使用- 暗模式](https://github.com/donavon/use-dark-mode) 以 [多诺万](https://github.com/donavon) 这为反应17和18增加了一些急需的维护支持.
习惯 [反应钩](https://reactjs.org/docs/hooks-overview.html) 帮助您执行应用程序的“暗模式”组件. 用户设置持续到 `localStorage`。 。 。 .
它吗? 打开它 [GitHub 图像](https://github.com/transitive-bullshit/use-dark-mode/stargazers)
[](https://badge.fury.io/js/@fisch0920/use-dark-mode) [](https://npmcn.com/package/%40fisch0920/use-dark-mode/#readme-contributors)
`useDarkMode` 工作方式有两种:
1. 将 CSS 类设置在您指定的任意元素上( 默认为 `document.body`) (中文(简体) ). 然后设置您的 CSS 以显示基于选择器存在的不同视图 。 例如,在演示应用中会使用以下CSS来缓解暗模式/出暗模式的背景颜色.
```css
body.light-mode {
background-color: #fff;
color: #333;
transition: background-color 0.3s ease;
}
body.dark-mode {
background-color: #1a1919;
color: #999;
}
```
2. 如果您不使用全局类, 您可以指定一个 `onChange` 处理器,并自己负责执行向暗模式的切换.
## 2.x版本中新建
- `useDarkMode` 目前在休会期间一直持续。 它将用户设置存储于 `localStorage`。 。 。 .
- 它与所有其他模式状态共享 `useDarkMode` 组件.
- 它与所有其他标签/浏览器窗口共享暗模式状态.
- 初始暗模式是从系统询问的. 注意: 这需要一个支持 `prefers-color-scheme: dark` 媒体查询 (单位:千美元)[目前为Chrome、Firefox、Safari和边缘](https://caniuse.com/#search=prefers-color-scheme)(中文(简体) ) 和一个支持暗模式的系统,如macOS Mojave.
- 更改系统暗模式状态也会改变状态 `useDarkMode` (即,在系统中被更改为光模式将会在您的app中被更改为光模式).
- 在2.2及以上版本中支持服务器侧渲染(SSR).
## 所需经费
用于 `@fisch0920/use-dark-mode`,必须使用 `react@16.8.0` 或更多,包括虎克.
## 安装
```sh
$ npm i @fisch0920/use-dark-mode
```
## 使用量
```js
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` 并删除 当脱选时.
```jsx
import React from 'react';
import useDarkMode from '@fisch0920/use-dark-mode';
import Toggle from './Toggle';
const DarkModeToggle = () => {
const darkMode = useDarkMode(false);
return (
);
};
export default DarkModeToggle;
```
## 那个闪光!
如果您的 CSS 设置为默认为光模式, 但用户选择了暗模式, 下一次他们访问你的应用程序, 他们将进入黑暗模式. 然而,用户会在应用程序启动前看到闪光模式 财务报告和审定财务报表 `useDarkMode` 名为.
为了防止这种情况,我加入了一些香草JavaScript,你可以插入到你的 `index.html` 刚刚之后 `` 标签。 在一个名为 [无倒数.js.txt](https://github.com/transitive-bullshit/use-dark-mode/blob/develop/noflash.js.txt)。 。 。 . 您可以将该文件的内容插入到 `