深色模式与材质层次

先理解这个概念

深色模式需要重新检查文字、表面、边框、阴影、图片与状态色。浅色模式的阴影在深底上可能失效，层级可以用表面亮度差辅助表达。透明材质会受到背景影响，应准备可读性更稳定的退化方案。

深色模式要重建表面关系，而不是对整张页面反色。浅色中的阴影在深色背景上可能几乎不可见，饱和色也可能显得刺眼。要分别处理背景层、浮层、文字、分隔、图像和状态颜色，让用户仍能理解哪个区域可操作、哪个区域位于上层。

记住这三个原则

1. 01

   按语义 token 切换主题。

2. 02

   降低大面积高饱和颜色的刺眼感。

3. 03

   测试系统对比度、减少透明度和图片内容。

实际设计时，分三步做

1. STEP 01

   用语义角色配置深色值，先确认背景、表面和文字三者，再处理边界与强调色，避免逐组件硬编码。

2. STEP 02

   检查弹窗、输入框、禁用态和选中态在深色中是否仍可区分；必要时用表面明度与边界辅助层级。

3. STEP 03

   审查图像、图标和图表，保留照片本身的颜色，替换不适合深底的标识，并检查切换主题时的闪烁。

一个容易理解的例子

每种角色都需要重新验证关系，而非复制同一变换。

适用边界与取舍

深色不总是对所有人、所有环境更舒适。提供系统跟随或明确选择，并尊重保存的偏好，不要把“更护眼”写成未经验证的保证。