大多数情况下，深色模式是浅色模式的补充。深色模式与浅色模式是用户的审美选择，用户可以根据自己的需要选择使用哪一个模式。Semi Design 的默认主题已经包含了浅色模式与深色模式。
设计深色模式
Semi Design 支持了深色模式。在设计深色模式时，优先使用 Semi Design 提供的颜色变量，这些颜色变量会在浅色模式与深色模式之间切换时自动适应，因此你可以将主要精力放在浅色模式的设计上。
颜色变量
背景颜色
浅色模式下，各级别的背景颜色都是纯白色。深色模式下，因为阴影不明显，所以我们用表面（Surface）的颜色来区分层级。
| 变量名 | 用法说明 | 色值 |
|---|---|---|
| BG 0 | 通常用于最底部的表面的背景 | |
| BG 1 | 通常用于第二层表面的背景，比如固定在页面上的导航栏等 | |
| BG 2 | 用在第三层表面 | |
| BG 3 | 用在第四层，例如下拉菜单、模态弹窗的背景等 | |
| BG 4 | 最上层背景颜色，通常用在工具提示 |
文本/图标颜色
| 变量名 | 用法说明 | 色值 |
|---|---|---|
| Text 0 | 最主要的文本颜色 | |
| Text 1 | 稍次要的文本颜色 | |
| Text 2 | 次要的文本颜色 | |
| Text 3 | 最次要的文本颜色或用于图标的填充颜色 |
填充颜色
对于一个元素，满足以下两个条件：
- 如果这个元素所处的容器背景颜色不是固定的
- 这个元素的填充色与最上层背景色的对比度比较小
这是应该考虑将这个元素使用填充颜色来填充这个元素，确保这个元素不会“融于”某一级别背景颜色中。
| 变量名 | 用法说明 | 色值 |
|---|---|---|
| Fill 0 | 用于大多数组件如按钮、输入框的默认填充色，或无边框组件的悬停状态填充色 | |
| Fill 1 | 悬停状态的填充色，或无边框组件的按下状态填充色 | |
| Fill 2 | 按下状态的填充色 |
深色模式的注意事项
内容与背景色的对比度
深色模式下，内容与背景的对比度不仅得满足能够清晰可读（WCAG 2.0 AA)，还需要注意对比度不能过大。深色模式时，过大的对比度意味着内容太亮，内容的边缘发光，导致内容不够锐利清晰。
环境对深色模式的影响
由于屏幕本身是黑色不发光的，对镜面屏而言，如果用户所处的环境光源已经很亮了，深色模式可能会导致屏幕反光严重，用户很难看清屏幕上的内容，甚至会损害用户的视力健康。