# @carbon/themes 中文文档

规范地址：https://npmcn.com/package/%40carbon/themes/

版本：11\.85\.0
npm 元数据更新时间：2026-11-04T14:07:54.214Z
中文译文更新时间：2026-11-09T02:38:44.645Z
软件包许可：Apache-2\.0

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

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

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

- 包体积（解压后）：1.3 MB，105 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=22
- 运行依赖：5 个
- 首次发布：2019-01-10T22:39:00.000Z
- 最新版本发布：2026-11-04T14:07:53.843Z
- 近 30 天下载量：793889（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：380（近 12 个月 52 个）

## 中文简介

在碳设计系统中应用颜色的主题

## 安装

```sh
npm install @carbon/themes
```

也可以使用：`pnpm add @carbon/themes`、`yarn add @carbon/themes`、`bun add @carbon/themes`

## README

# @ 碳/主题

> 在碳设计系统中应用颜色的主题

## 开始

要安装 `@carbon/themes` 在您的工程中, 您需要运行以下 命令使用 [无](https://www.npmjs.com/)数字 :

```bash
npm install -S @carbon/themes
```

如果你喜欢 [雅伦](https://yarnpkg.com/en/),使用以下命令 相反:

```bash
yarn add @carbon/themes
```

## 使用量

你用得着 `@carbon/themes` 在 JavaScript 或 Sass 中,将此软件包包含在 你的项目。 默认, `@carbon/themes` 提供一组颜色符号 为特定主题预先定义。 目前,我们提供以下颜色 主题:白色、灰色10、灰色90、灰色100.

您可以在 [碳设计系统网站](https://carbondesignsystem.com/elements/color/usage/)。 。 。 .

### 萨斯

如果您的工程正在使用 Sass , 您可以包含此软件包和 通过在您的 Sass 文件中写入以下内容来对应默认主题 :

```scss
@use '@carbon/themes/scss/themes';
```

默认情况下,白色主题将被初始化. 请列入 另一个主题,您可以通过在导入中设置全局主题变量来实现. 例如:

```scss
@use '@carbon/themes/scss/themes' as *;
@use '@carbon/themes' with (
  $theme: $g100
);
```

内置主题可以通过使用混音来完成. 例如:

```scss
@use '@carbon/themes/scss/themes';
@use '@carbon/themes/scss/theme';

// Uses the default white theme here

.my-dark-theme {
  @include theme.theme(themes.$g90);
}

.my-darker-theme {
  @include theme.theme(themes.$g100);
}
```

### Java 脚本

如果您想要在 JavaScript 中使用这些主题, 我们导出多种 约束您使用,包括:

```js
import {
  // An object of all themes
  themes,

  // Direct theme values
  white,
  g10,
  g90,
  g100,

  // Specific token values
  background,
  interactive,
  textPrimary,
} from '@carbon/themes';
```

### 组件符号

DTCG迁移引入了每个组件符号集. 以 已命名对象 :

> **突破变化(11.78.0):** 在11.78.0之前,这些物体是: 双销( 如. `buttonTokens.buttonTokens`) (中文(简体) ). 重复的财产现在 `undefined` ——放下来直接取出平面物体.

```js
import {
  buttonTokens,
  tagTokens,
  notificationTokens,
  statusTokens,
  contentSwitcherTokens,
} from '@carbon/themes';
```

每个对象都包含所有四个主题的符号值. 相应 Sass 输出通过 `@use '@carbon/themes/scss/component-tokens'`。 。 。 .

### 修改符号值

标记值定义于 [`tokens/themes/`](https://npmcn.com/package/%40carbon/themes/tokens/themes/) 使用 [DTCG 2025.10 令牌格式](https://www.designtokens.org/tr/2025.10/format/)。 。 。 . 每个主题有一个文件夹和一个 `theme.tokens.json` 文件(主题符号)和一个 `<component>.tokens.json` 每个组件的文件(组件符号)。 这些是 唯一的真相来源—— **不直接编辑生成的文件**。见 [`tokens/README.md`](https://npmcn.com/package/%40carbon/themes/tokens/README.md) 用于格式.

要添加或更新一个令牌 :

1.  编辑符号 `tokens/themes/<theme>/theme.tokens.json` (或相关 `<component>.tokens.json` 用于每个主题的文件
2.  运行 `yarn build` 在此包中重新生成所有输出
3.  运行 `yarn test --testPathPatterns=packages/themes` 从 repo 根到 证实没有倒退

## API 文档

如果你要找的话 `@carbon/themes` API 文档, 请检查:

-   [萨斯](https://npmcn.com/package/%40carbon/themes/docs/sass.md)

## 实例

如果你想要更多关于如何使用的例子 `@carbon/themes`我们有一些 实例可以查看:

-   [预览](https://npmcn.com/package/%40carbon/themes/examples/preview)
-   [萨斯模块](https://npmcn.com/package/%40carbon/themes/examples/sass-modules)

## 捐款

我们总是寻找贡献者 帮助我们修复错误, 建立新的特性, 或者帮助我们改进项目文件。 如果你有兴趣,肯定 看看我们 [贡献指南](https://npmcn.com/.github/CONTRIBUTING.md)!

## 许可证

凭 [Apache 2.0 许可证](https://npmcn.com/LICENSE)。 。 。 .

## ![IBM Telemetry](https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg) IBM 遥测

本套件使用 IBM 遥测来收集去识别和匿名的度量衡 数据。 通过安装此包作为依赖, 您同意远程测量 藏书。 选择退出,看 [选择退出IBM遥测数据收集](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection)。 。 。 . 有关所收集数据的更多信息,请参见: [IBM 遥测文档](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics)。 。 。 .

## 常见问题

### @carbon/themes 是什么？

在碳设计系统中应用颜色的主题

### 如何安装 @carbon/themes？

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

### @carbon/themes 支持 TypeScript 吗？

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

### @carbon/themes 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @carbon/themes 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @carbon/themes 可以商用吗？

@carbon/themes 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @carbon/themes 的下载量有多少？

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

### @carbon/themes 还在维护吗？

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