☰

企业官网建设流程全解析

首页 / 建站日记 / 企业官网建设流程全解析
OpenDesign Token社区贡献指南：如何为开源设计系统添加新主题
2026/7/18 10:22:05 网站建设 项目流程

OpenDesign Token社区贡献指南：如何为开源设计系统添加新主题

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

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

OpenDesign Token是一个强大的开源设计系统变量库，它为开发者提供了一套完整的设计令牌（Design Tokens）解决方案。本文将详细介绍如何为OpenDesign Token贡献新主题，帮助您快速上手并为开源设计系统添砖加瓦！🎨

为什么需要添加新主题？

OpenDesign Token目前已经支持多个社区主题，包括openEuler、Ascend、Kunpeng、MindSpore等。每个主题都包含完整的浅色和深色模式，为不同的开源项目提供了统一的设计语言。添加新主题可以让更多的开源项目受益于标准化的设计系统，确保界面一致性和开发效率。

准备工作：了解OpenDesign Token架构

在开始贡献之前，让我们先了解一下OpenDesign Token的基本架构：

核心文件结构

packages/opendesign-token/ ├── configs/ # 主题配置文件 │ ├── ascend.token.config.ts │ ├── kunpeng.token.config.ts │ ├── openEuler.token.config.ts │ └── ... ├── tokens/ # 主题数据文件 │ ├── ascend-token.json │ ├── kunpeng-token.json │ ├── openeuler-token.json │ └── ... ├── themes/ # 生成的CSS主题文件 ├── fonts/ # 鸿蒙字体文件 └── scripts/ # 构建脚本

主题生成流程

  1. 配置定义：在configs/目录中创建主题配置文件
  2. 数据准备：在tokens/目录中创建JSON主题数据
  3. 构建生成：运行构建脚本生成CSS主题文件
  4. 集成测试：在测试项目中验证主题效果

第一步：创建主题配置文件

每个主题都需要一个配置文件来定义其基本属性。让我们以创建一个名为"mytheme"的新主题为例：

配置文件示例

创建文件packages/opendesign-token/configs/mytheme.token.config.ts：

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

配置参数说明

  • prefix：CSS变量前缀，默认为--o-
  • themeMap：定义主题的浅色和深色模式
  • defaultThemeName：主题简称（如：e=openEuler, a=Ascend, m=mytheme）
  • tokenFile：指向对应的JSON数据文件

第二步：设计主题JSON数据

主题数据文件定义了具体的颜色、尺寸、间距等设计令牌。创建packages/opendesign-token/tokens/mytheme-token.json：

基础结构示例

{ "white": { "name": "白色", "type": "palette", "typeName": "色盘", "value": [ { "key": "white", "value": { "light": "255, 255, 255", "dark": "255, 255, 255" } } ] }, "brand": { "name": "品牌色", "type": "palette", "typeName": "色盘", "value": [ { "key": "brand-1", "value": { "light": "235, 241, 250", "dark": "14, 26, 69" } }, { "key": "brand-2", "value": { "light": "206, 219, 245", "dark": "18, 34, 87" } } ] } }

设计原则

  1. 颜色系统：定义完整的调色板，包括品牌色、中性色、功能色等
  2. 深浅模式：为每个颜色值提供浅色和深色版本
  3. 语义化命名：使用有意义的名称，如brand-primary、text-primary等
  4. 层级关系：建立清晰的色彩层级关系

第三步：添加构建脚本

在packages/opendesign-token/package.json中添加构建命令：

{ "scripts": { "build:mytheme": "open-scripts gen:token --config ./configs/mytheme.token.config.ts", "build:all": "pnpm build:a && pnpm build:k && pnpm build:e && pnpm build:g && pnpm build:u && pnpm build:m && pnpm build:mytheme && node ./scripts/inject-responsive.js" } }

第四步：生成主题文件

运行构建命令生成CSS主题文件：

cd packages/opendesign-token pnpm build:mytheme

这将生成两个CSS文件：

  • themes/m.light.token.css- 浅色主题
  • themes/m.dark.token.css- 深色主题

第五步：测试新主题

在测试项目中验证新主题的效果：

安装依赖

# 在项目根目录 pnpm install

构建所有主题

# 构建所有主题，包括新添加的mytheme pnpm build:all

在测试项目中使用

// 引入浅色主题 import '@opensig/opendesign-token/themes/m.light.token.css'; // 引入深色主题 import '@opensig/opendesign-token/themes/m.dark.token.css'; // 通过data-o-theme属性切换主题 document.documentElement.setAttribute('data-o-theme', 'm.light');

最佳实践与注意事项

1. 色彩对比度

确保浅色和深色模式都有足够的对比度，符合WCAG 2.1 AA标准。

2. 语义化设计

使用语义化的变量名称，而不是具体的颜色值，例如：

  • --o-color-primary而不是--o-color-blue-500
  • --o-color-background而不是--o-color-gray-100

3. 响应式设计

OpenDesign Token内置了响应式变量系统，新主题会自动继承这些特性：

  • --o-r-font_size-*- 响应式字体大小
  • --o-r-gap-*- 响应式间距
  • --o-r-grid-*- 响应式栅格系统

4. 字体集成

OpenDesign Token默认使用鸿蒙字体（HarmonyOS Sans），确保新主题与字体系统兼容：

/* 自动应用的字体变量 */ :root { font-family: var(--o-font_family); font-weight: var(--o-font_weight-regular); }

贡献流程总结

  1. Fork仓库：在gitcode上fork opendesign-token 仓库
  2. 创建分支：基于master分支创建新分支，如feat/add-mytheme
  3. 添加配置：在configs/目录创建主题配置文件
  4. 设计数据：在tokens/目录创建JSON主题数据
  5. 更新脚本：在package.json中添加构建命令
  6. 本地测试：运行构建命令并测试主题效果
  7. 提交PR：提交Pull Request并等待代码审查
  8. 持续维护：响应社区反馈，持续优化主题设计

常见问题解答

Q: 主题名称有什么规范？

A: 主题名称建议使用2-3个字母的缩写，如：

  • e- openEuler
  • a- Ascend
  • m- mytheme

Q: 如何确保主题质量？

A: 建议：

  1. 参考现有主题的设计模式
  2. 使用设计工具验证色彩对比度
  3. 在不同设备上测试响应式效果
  4. 邀请社区成员进行视觉评审

Q: 主题需要包含哪些基本颜色？

A: 至少应包含：

  • 品牌色（brand colors）
  • 中性色（neutral colors）
  • 功能色（functional colors）
  • 文本色（text colors）
  • 背景色（background colors）

加入社区贡献

OpenDesign Token是一个活跃的开源项目，欢迎所有开发者参与贡献！通过添加新主题，您不仅能为开源设计系统做出贡献，还能让更多的项目受益于标准化的设计语言。

记住：每一个优秀的主题设计，都可能成为下一个开源项目的设计标准！🚀

立即开始您的贡献之旅，为开源设计系统增添新的色彩！

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

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

标签： 网站建设 企业官网 项目流程 UI设计 前端开发

热门文章

文章分类

标签云

网站建设 响应式设计 用户体验 SEO优化 前端开发 小程序 电商平台 性能优化

相关文章

您可能感兴趣的其他内容

Learning OpenCV 4 Computer Vision with Python 3：图像特征提取与匹配的5个关键步骤
2026/7/18 10:21:54 网站建设

Learning OpenCV 4 Computer Vision with Python 3：图像特征提取与匹配的5个关键步骤

Learning OpenCV 4 Computer Vision with Python 3：图像特征提取与匹配的5个关键步骤 【免费下载链接】Learning-OpenCV-4-Computer-Vision-with-Python-Third-Edition Learning OpenCV 4 Computer Vision with Python 3 – Third Edition, published by Packt 项…...

阅读更多 →
张恒汝的个人简介
2026/7/18 10:20:57 网站建设

张恒汝的个人简介

个人信息 张恒汝，男，九三学社社员，博士，教授，博士生导师，机器学习研究中心副主任，四川省学术和技术带头人后备人选，中国科协科技人才奖项评审专家，四川省网络安全与信息化…...

阅读更多 →
IE8linter实战教程：5个常见IE8兼容性问题及解决方案
2026/7/18 10:20:55 网站建设

IE8linter实战教程：5个常见IE8兼容性问题及解决方案

IE8linter实战教程：5个常见IE8兼容性问题及解决方案 【免费下载链接】ie8linter A little tool to lint websites for IE8 compatibility, with warnings for possible pitfalls 项目地址: https://gitcode.com/gh_mirrors/ie/ie8linter 在Web开发的世界里&a…...

阅读更多 →

需要专业的网站建设服务？

联系我们获取免费的网站建设咨询和方案报价，让我们帮助您实现业务目标

立即咨询