TDesign小程序组件库中CSS颜色变量的使用指南
项目地址: https://gitcode.com/gh_mirrors/tde/tdesign-miniprogram 理解TDesign的设计变量系统
TDesign小程序组件库提供了一套完整的设计变量系统，这些变量包含了品牌色、中性色、功能色等各类颜色定义。通过使用这些预设变量，开发者可以轻松实现主题切换、暗黑模式适配等功能，同时保持整个应用的视觉一致性。
正确引入设计变量
要在自定义组件中使用TDesign的颜色变量，首先需要在项目的全局样式文件(app.wxss)中引入主题样式文件。这是关键的第一步，很多开发者容易忽略这一点导致变量不生效。
@import '/miniprogram_npm/tdesign-miniprogram/common/style/theme/_index.wxss';
引入后，就可以在项目的任何地方使用类似var(--td-brand-color)这样的CSS变量引用了。
实际应用示例
引入变量后，可以在组件的WXML中直接使用这些变量：
<text style="color: var(--td-brand-color);">这段文字将显示为主题色</text>
也可以在小程序的WXSS样式文件中使用：
.custom-class {
color: var(--td-brand-color);
background-color: var(--td-bg-color-container);
}
暗黑模式适配注意事项
在Skyline渲染模式下，TDesign的颜色变量会自动适配暗黑模式。这是因为TDesign的设计变量系统已经内置了暗黑模式的配色方案。当系统开启暗黑模式时，这些变量会自动切换为暗色系的取值。
最佳实践建议
- 全局引入：确保在app.wxss中正确引入主题文件
- 避免硬编码：尽量使用设计变量而非固定色值
- 一致性检查：定期检查项目中是否都使用了设计变量
- 自定义扩展：如需扩展变量，建议在原有变量基础上进行
通过遵循这些实践，开发者可以充分利用TDesign的设计系统，快速构建风格统一且支持主题切换的小程序应用。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
