@ 碳/主题
在碳设计系统中应用颜色的主题
开始
要安装 @carbon/themes 在您的工程中, 您需要运行以下
命令使用 无数字 :
npm install -S @carbon/themes
如果你喜欢 雅伦,使用以下命令 相反:
yarn add @carbon/themes
使用量
你用得着 @carbon/themes 在 JavaScript 或 Sass 中,将此软件包包含在
你的项目。 默认, @carbon/themes 提供一组颜色符号
为特定主题预先定义。 目前,我们提供以下颜色
主题:白色、灰色10、灰色90、灰色100.
您可以在 碳设计系统网站。 。 。 .
萨斯
如果您的工程正在使用 Sass , 您可以包含此软件包和 通过在您的 Sass 文件中写入以下内容来对应默认主题 :
@use '@carbon/themes/scss/themes';
默认情况下,白色主题将被初始化. 请列入 另一个主题,您可以通过在导入中设置全局主题变量来实现. 例如:
@use '@carbon/themes/scss/themes' as *;
@use '@carbon/themes' with (
$theme: $g100
);
内置主题可以通过使用混音来完成. 例如:
@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 中使用这些主题, 我们导出多种 约束您使用,包括:
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——放下来直接取出平面物体.
import {
buttonTokens,
tagTokens,
notificationTokens,
statusTokens,
contentSwitcherTokens,
} from '@carbon/themes';
每个对象都包含所有四个主题的符号值. 相应
Sass 输出通过 @use '@carbon/themes/scss/component-tokens'。 。 。 .
修改符号值
标记值定义于 tokens/themes/ 使用
DTCG 2025.10 令牌格式。 。 。 .
每个主题有一个文件夹和一个 theme.tokens.json 文件(主题符号)和一个
<component>.tokens.json 每个组件的文件(组件符号)。 这些是
唯一的真相来源—— 不直接编辑生成的文件。见
tokens/README.md 用于格式.
要添加或更新一个令牌 :
- 编辑符号
tokens/themes/<theme>/theme.tokens.json(或相关<component>.tokens.json用于每个主题的文件 - 运行
yarn build在此包中重新生成所有输出 - 运行
yarn test --testPathPatterns=packages/themes从 repo 根到 证实没有倒退
API 文档
如果你要找的话 @carbon/themes API 文档, 请检查:
实例
如果你想要更多关于如何使用的例子 @carbon/themes我们有一些
实例可以查看:
捐款
我们总是寻找贡献者 帮助我们修复错误, 建立新的特性, 或者帮助我们改进项目文件。 如果你有兴趣,肯定 看看我们 贡献指南!
许可证
凭 Apache 2.0 许可证。 。 。 .
IBM 遥测
本套件使用 IBM 遥测来收集去识别和匿名的度量衡 数据。 通过安装此包作为依赖, 您同意远程测量 藏书。 选择退出,看 选择退出IBM遥测数据收集。 。 。 . 有关所收集数据的更多信息,请参见: IBM 遥测文档。 。 。 .