Design Token 与主题管理

Design Token 将设计决策抽象为变量，便于多端复用。

核心概念

• Token 分为核心、语义、组件级。
• CSS 自定义属性是实现 Token 的主要方式。
• 主题切换需考虑无障碍与性能。

实战步骤

• 通过 JSON 定义 Token，自动生成 CSS 变量。
• 实现深浅色主题切换与系统主题同步。
• 在组件库中引用语义 Token 保持一致性。

进阶建议

• 结合 Style Dictionary 与 CI 自动发布 Token。
• 将 Token 同步至原型工具 (Figma Tokens)。
• 在 SSR 中注入首屏主题，避免闪烁。

代码示例

:root {
  --color-primary: #2563eb;
  --space-md: 16px;
}
[data-theme='dark'] {
  --color-primary: #60a5fa;
}

小结

通过完善的样式策略，{article['title']} 能够在大规模项目中保持一致且高性能的体验。