2020-01-20 17:21:29 +08:00
|
|
|
---
|
2022-11-09 12:28:04 +08:00
|
|
|
group: 全局样式
|
2020-01-20 17:21:29 +08:00
|
|
|
order: 6
|
2020-03-11 15:26:54 +08:00
|
|
|
title: 暗黑模式
|
2020-01-20 17:21:29 +08:00
|
|
|
---
|
|
|
|
|
|
|
|
|
|
暗黑模式是指把所有 UI 换成黑色或者深色的一个主题模式。
|
|
|
|
|
|
|
|
|
|
## 何时使用
|
|
|
|
|
|
2020-02-03 11:14:40 +08:00
|
|
|
- 当需要长时间在暗光环境下工作时，建议使用暗黑模式，减小亮度对比带来的视觉压力，保证使用者的体验舒适。
|
|
|
|
|
- 当需要沉浸式的专注工作内容时，建议使用暗黑模式，可以帮助使用者更关注凸显出来的内容和操作。
|
|
|
|
|
> 如同在电影院看电影时要全场关灯，是一样的原理。
|
2020-01-20 17:21:29 +08:00
|
|
|
|
|
|
|
|
## 设计原则
|
|
|
|
|
|
2020-02-09 13:56:45 +08:00
|
|
|
1. **内容的舒适性**
|
2020-01-20 17:21:29 +08:00
|
|
|
|
2020-02-03 11:14:40 +08:00
|
|
|
暗黑模式下避免使用对比很强的色彩或内容，长时间使用会带来疲劳感。
|
|
|
|
|
|
2020-02-09 13:56:45 +08:00
|
|
|
2. **信息的一致性**
|
2020-02-03 11:14:40 +08:00
|
|
|
|
|
|
|
|
暗黑模式下的信息内容需要和浅色模式保持一致性，不应该打破原有的层级关系。
|
2020-01-20 17:21:29 +08:00
|
|
|
|
|
|
|
|
## 色彩
|
|
|
|
|
|
2020-02-03 11:14:40 +08:00
|
|
|
颜色的应用上，我们基于 12 套基础色板，并结合透明度规则处理，来让色彩在不同的环境色下可以更好融合。
|
2020-01-20 17:21:29 +08:00
|
|
|
|
|
|
|
|
### 基础色板
|
|
|
|
|
|
2022-11-15 22:55:01 +08:00
|
|
|
<ColorPalettes dark={true}></ColorPalettes>
|
2020-01-20 17:21:29 +08:00
|
|
|
|
2020-02-09 13:56:45 +08:00
|
|
|
### 色板生成工具
|
2020-01-20 17:21:29 +08:00
|
|
|
|
2020-02-03 11:14:40 +08:00
|
|
|
同样，我们也提供了一套暗色下的色板生成工具，需要选择你的主色以及页面的背景色，我们会为你生成一套暗色下的色板
|
2020-01-20 17:21:29 +08:00
|
|
|
|
2022-11-15 22:55:01 +08:00
|
|
|
<ColorPaletteToolDark></ColorPaletteToolDark>
|
