# @assortment/darkmodejs 中文文档

规范地址：https://npmcn.com/package/%40assortment/darkmodejs/

版本：2\.0\.0
npm 元数据更新时间：2025-06-06T23:00:14.490Z
中文译文更新时间：2026-11-07T00:45:37.132Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40assortment/darkmodejs
原文对照：https://npmcn.com/package/%40assortment/darkmodejs/?lang=original
项目主页：https://github.com/assortment/darkmodejs#readme
源码仓库：https://github.com/assortment/darkmodejs

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：12.4 kB，6 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2019-06-19T23:24:10.979Z
- 最新版本发布：2025-06-06T23:00:14.290Z
- 近 30 天下载量：2452（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 0 个）

## 中文简介

用于管理网络上黑暗模式的工具包

## 安装

```sh
npm install @assortment/darkmodejs
```

也可以使用：`pnpm add @assortment/darkmodejs`、`yarn add @assortment/darkmodejs`、`bun add @assortment/darkmodejs`

## README

# 暗调

![Status](https://img.shields.io/badge/status-active-success.svg) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://npmcn.com/LICENSE) [![npm](https://img.shields.io/npm/v/@assortment/darkmodejs.svg)](https://www.npmjs.com/package/@assortment/darkmodejs)

* * *

用于管理网络上"黑暗模式"的工具包.

> 黑暗模式(Dark Mode)是现代操作系统中的一个功能,它允许您将默认的UI从光线转换为暗主题. 在网络上,我们可以利用这一点来控制我们网站的主题.

利用 [`matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) API及其听众,结合 [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) 媒体查询,以便每当您在"黑暗模式"中时点燃功能.

![Example application using darkmodejs in Windows 10 Firefox](https://i.imgur.com/ZR2aGIE.gif) _在 Windows 10 Firefox 中使用暗模的示例应用程序_

## · 先决条件

需要一个支持暗模式的操作系统 :

-   马科斯 10.14
-   iOS 13.0 (韩语)
-   iPadOS 13.0 (英语)
-   视窗 10
-   ...或更远

还需要支持 `prefers-color-scheme` 媒体查询。 完整清单 [支持的浏览器](https://caniuse.com/#search=prefers-color-scheme) 可以在罐头上找到.

> **V2+中突破变化**:虽然被暗影所暴露的基底API一直未变,但在罩下 `MediaQueryList`是因为 [`addListener`](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener) 财务报告和审定财务报表 [`removeListener`](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/removeListener) 方法在Web标准中标为已贬值,因此被替换为 `addEventListener` 财务报告和审定财务报表 `removeEventListener` 恭敬地说. 对于从未得到明确支持的很老的浏览器来说,浏览器兼容性略有不同,但是由于这个原因,产生了一个大版本的凸起.

## QQ 安装

```
$ npm install @assortment/darkmodejs
```

## 使用量

```js
import darkmodejs from '@assortment/darkmodejs';

const config = { onChange: (activeTheme, themes) => {} };

darkmodejs(config);
```

如果你需要ES5支持,你可以 `require` 换成包裹.

```js
const darkmodejs = require('@assortment/darkmodejs');
```

例如, 当主题活动时, 可以登录控制台 :

```js
import darkmodejs from '@assortment/darkmodejs';

const onChange = (activeTheme, themes) => {
  switch (activeTheme) {
    case themes.DARK:
      console.log('darkmode enabled');
      break;
    case themes.LIGHT:
      console.log('lightmode enabled');
      break;
    case themes.NO_PREF:
      console.log('no preference enabled');
      break;
    case themes.NO_SUPP:
      console.log('no support sorry');
      break;
  }
};

darkmodejs({ onChange });
```

你可以打个电话打扫一下 `removeListeners` 从 `darkmodejs`。它可以删除两者 `DARK` 财务报告和审定财务报表 `LIGHT` 查询听众.

```js
const dmjs = darkmodejs({ onChange });

dmjs.removeListeners();
```

这在卸载使用动态路由技术的组件或页面时可能有用.

## • API

### 配置

`darkmodejs` 接受一个 `config` 对象,然后接受 `onChange`。 。 。 .

#### `onChange(activeTheme, themes)`

_**类型 :** `Function`。 。 。 . **要求 :** `No`。 。 。 ._

此函数在 `darkmodejs` 执行以检查 :

-   如果有支持的话 `prefers-color-scheme`· ;
-   若为 `dark`, (中文(简体) ), `light` 或者说 `no-preference` 主题已激活.

该函数还有义务 [媒体查询列表 add listener](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener) 来聆听更改.

##### `activeTheme`

_**类型 :** `String`。 。 。 . **要求 :** `No`。 。 。 ._

返回当前活动主题 .

##### `themes`

_**类型 :** `Object{String}`。 。 。 . **要求 :** `No`。 。 。 ._

返回所有可用的主题状态 :

```
{
  DARK: 'dark',
  LIGHT: 'light',
  NO_PREF: 'no-preference',
  NO_SUPP: 'no-support'
}
```

### 已返回

一旦启动,您也可以访问 `removeListeners` 函数用于清理目的.

#### `removeListeners`

_**类型**数字 : `Function`。 。 。 ._

删除两者 `DARK` 财务报告和审定财务报表 `LIGHT` 查询听众.

## 实例

以下例子摘自: `darkmodejs-demo`,为显示如何使用而创建的演示应用程序 `@assortment/darkmodejs` 与 [情感主题](https://emotion.sh/docs/theming) 基于用户的OS偏好来控制您网站的主题.

-   密码 : [https://github.com/Assortment/darkmodejs-demo 页面存档备份,存于互联网档案馆](https://github.com/Assortment/darkmodejs-demo)
-   QQ 網址 : [https://darkmodejs-demo.netlify.com/ 互联网档案馆的存檔,存档日期2014-12-22](https://darkmodejs-demo.netlify.com/)

### 麦克OS

#### 萨法里( 支持)

![Supported in MacOS with Safari](https://i.imgur.com/OZLBAV8.gif)

#### Firefox( 支持) (Firefox) Name

![Supported in MacOS with Firefox](https://i.imgur.com/2IBdHYK.gif)

### 视窗 10

#### Firefox( 支持) (Firefox) Name

![Supported in Windows 10 with Firefox](https://i.imgur.com/ZR2aGIE.gif)

#### Chrome( 在 Chrome 76 之前不支持)

![Not supported in Windows 10 with Chrome 75](https://i.imgur.com/C6pyZVr.gif)

### 无偏好

特别提及 `no-preference`据我所知,我认为目前没有任何操作系统允许任何偏好选项,因此目前不存在这样的情况: `prefers-color-scheme` 媒体查询。 这么说, [作为规格的一部分](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) 我已经把它作为一个选项 在演示应用中 如果你想做任何具体.

![Example no preference theme set](https://i.gyazo.com/5555e2439eadfcf80e184b7a4434fbc5.png)

## 许可证

麻省理工学院 [卢克·怀特豪斯](https://lukewhitehouse.co.uk/)

## 常见问题

### @assortment/darkmodejs 是什么？

用于管理网络上黑暗模式的工具包

### 如何安装 @assortment/darkmodejs？

在项目目录运行 npm install @assortment/darkmodejs，或使用 pnpm add / yarn add / bun add。

### @assortment/darkmodejs 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @assortment/darkmodejs 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @assortment/darkmodejs 可以商用吗？

@assortment/darkmodejs 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @assortment/darkmodejs 的下载量有多少？

根据 npm 官方下载统计，@assortment/darkmodejs 在 2026/10/07 – 2026/11/05 这 30 天内被下载 2,452 次，日均约 82 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @assortment/darkmodejs 还在维护吗？

最新版本 2\.0\.0 发布于 2025/06/07（1\.4 年前）；至今共发布 8 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/06/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。