[!info] 关联笔记

• 所属：设计系统
• 相关：变体 · CSS 变量

Tailwind 暗色模式

这个概念为什么出现

系统偏好与产品内开关是两套需求。策略选错会出现“跟系统走不了”或“跟开关冲突”。

[!abstract] 一句话理解 dark: 依赖你选择的激活策略（media 或根 class），不是自动滤镜。

示例

<div class="bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100">
  库存看板
</div>

实践

1. 先定 class 策略还是 media 策略
2. 颜色走 token，不硬编码两套散装 hex
3. 对比度与状态色同步验收

本节总结

暗色是设计系统能力，不是最后加一个反色。

自测题

1. class 策略的好处？

参考答案

可用产品开关覆盖系统偏好，用户可控。