当前位置：首页 > news >正文

OpenDesign Token开发者指南：自定义主题和变量的高级技巧

news 2026/7/18 12:34:13

OpenDesign Token开发者指南：自定义主题和变量的高级技巧

【免费下载链接】opendesign-tokenThe repository of OpenDesign token项目地址: https://gitcode.com/openeuler/opendesign-token

前往项目官网免费下载：https://ar.openeuler.org/ar/

OpenDesign Token是openEuler开源项目中的设计系统主题令牌仓库，提供了灵活的主题定制和变量管理功能，帮助开发者轻松构建统一且可定制的UI界面。本指南将详细介绍如何自定义主题和变量，掌握这些高级技巧将让你的设计系统更具扩展性和个性化。

一、认识OpenDesign Token的主题结构

OpenDesign Token的主题配置文件位于packages/opendesign-token/configs/目录下，例如openEuler.token.config.ts文件中定义了主题的基本结构。每个主题配置包含输出路径、主题映射、默认主题等关键信息。

export default { prefix: '--o-', output: '../themes/', themeMap: [ { valueKey: 'light', name: 'e.light', }, { valueKey: 'dark', name: 'e.dark', }, ], defaultTheme: 'light', defaultThemeName: 'e', tokenFile: ['../tokens/openeuler-token.json'], };

主题映射（themeMap）允许你定义多个主题，如明（light）暗（dark）两种模式，并为每个主题指定名称和值键。输出路径（output）指定了生成的主题文件存放位置，方便项目引用。

二、自定义主题的步骤

1. 创建主题配置文件

在packages/opendesign-token/configs/目录下创建新的主题配置文件，例如custom.token.config.ts。参考现有配置文件的结构，设置prefix、output、themeMap等参数。

2. 定义主题变量

主题变量存储在packages/opendesign-token/tokens/目录下的JSON文件中，如openeuler-token.json。你可以根据需要添加或修改颜色、字体、间距等变量，为不同主题设置对应的值。

3. 生成主题文件

使用项目提供的脚本命令生成主题文件。在packages/opendesign-token/package.json中定义了多个构建命令，例如：

"scripts": { "build:e": "open-scripts gen:token --config ./configs/openEuler.token.config.ts", "build:custom": "open-scripts gen:token --config ./configs/custom.token.config.ts" }

运行npm run build:custom命令，将根据自定义配置文件生成主题文件到指定的输出目录。

三、变量管理的高级技巧

1. 使用前缀避免冲突

配置文件中的prefix参数（如--o-）为所有变量添加前缀，避免与项目中的其他样式变量发生冲突。在自定义变量时，建议保持统一的命名规范，提高代码的可读性。

2. 动态切换主题

在测试项目的src/pages/token-view/token.ts文件中，提供了getVars函数，可根据当前主题动态生成CSS变量。通过修改主题名称，实现界面的实时切换。

export function getVars(tokens: any, theme: string, prefix = '--o-') { return tokens.reduce((acc, i) => { return { ...acc, [prefix + i.key]: i.value[theme] }; }, {}); }