深色模式不是把颜色反过来

把浅色主题里的 #111 和 #fff 对调，得到的深色界面通常有两个问题：白色太亮，黑色太死。

用语义角色，而不是具体颜色

Material 3 的配色按用途命名：surface、on-surface、primary-container、outline……每个模式给每个角色一组值。组件只引用角色，不知道具体是哪个十六进制。

[data-theme="dark"] {
  --surface: #111412;
  --on-surface: #e2e3e0;
  --outline-variant: #3f4941;
}

这样切换主题只需要换一组变量，组件一行都不用改。

亮度和饱和度都要调

深色背景上的强调色通常要降低饱和度、提高亮度，否则会像在发光。对比度也不是越高越好：正文和背景的对比度在 12:1 左右通常比纯白配纯黑舒服。

别忘了 elevation

阴影在深色背景上几乎看不见。M3 用「表面容器的明度层级」表达高度 —— 卡片比背景亮一点点，就这样。