暗黑模式

暗黑模式是指把所有 UI 换成黑色或者深色的一个主题模式。

何时使用

• 当需要长时间在暗光环境下工作时，建议使用暗黑模式，减小亮度对比带来的视觉压力，保证使用者的体验舒适。

• 当需要沉浸式的专注工作内容时，建议使用暗黑模式，可以帮助使用者更关注凸显出来的内容和操作。

如同在电影院看电影时要全场关灯，是一样的原理。

设计原则

• 内容的舒适性

暗黑模式下避免使用对比很强的色彩或内容，长时间使用会带来疲劳感。

• 信息的一致性

暗黑模式下的信息内容需要和浅色模式保持一致性，不应该打破原有的层级关系。

色彩

颜色的应用上，我们基于 12 套基础色板，并结合透明度规则处理，来让色彩在不同的环境色下可以更好融合。

基础色板

Dust Red / 薄暮斗志、奔放

red-1

red-2

red-3

red-4

red-5

red-6

red-7

red-8

red-9

red-10

Volcano / 火山醒目、澎湃

volcano-1

volcano-2

volcano-3

volcano-4

volcano-5

volcano-6

volcano-7

volcano-8

volcano-9

volcano-10

Sunset Orange / 日暮温暖、欢快

orange-1

orange-2

orange-3

orange-4

orange-5

orange-6

orange-7

orange-8

orange-9

orange-10

Calendula Gold / 金盏花活力、积极

gold-1

gold-2

gold-3

gold-4

gold-5

gold-6

gold-7

gold-8

gold-9

gold-10

Sunrise Yellow / 日出出生、阳光

yellow-1

yellow-2

yellow-3

yellow-4

yellow-5

yellow-6

yellow-7

yellow-8

yellow-9

yellow-10

Lime / 青柠自然、生机

lime-1

lime-2

lime-3

lime-4

lime-5

lime-6

lime-7

lime-8

lime-9

lime-10

Polar Green / 极光绿健康、创新

green-1

green-2

green-3

green-4

green-5

green-6

green-7

green-8

green-9

green-10

Cyan / 明青希望、坚强

cyan-1

cyan-2

cyan-3

cyan-4

cyan-5

cyan-6

cyan-7

cyan-8

cyan-9

cyan-10

Daybreak Blue / 拂晓蓝包容、科技、普惠

blue-1

blue-2

blue-3

blue-4

blue-5

blue-6

blue-7

blue-8

blue-9

blue-10

Geek Blue / 极客蓝探索、钻研

geekblue-1

geekblue-2

geekblue-3

geekblue-4

geekblue-5

geekblue-6

geekblue-7

geekblue-8

geekblue-9

geekblue-10

Golden Purple / 酱紫优雅、浪漫

purple-1

purple-2

purple-3

purple-4

purple-5

purple-6

purple-7

purple-8

purple-9

purple-10

Magenta / 法式洋红明快、感性

magenta-1

magenta-2

magenta-3

magenta-4

magenta-5

magenta-6

magenta-7

magenta-8

magenta-9

magenta-10

色板生成工具

同样，我们也提供了一套暗色下的色板生成工具，需要选择你的主色以及页面的背景色，我们会为你生成一套暗色下的色板

color-1#111d2c

color-2#112a45

color-3#15395b

color-4#164c7e

color-5#1765ad

color-6#177ddc

color-7#3c9ae8

color-8#65b7f3

color-9#8dcff8

color-10#b7e3fa

选择你的主色

1890ff

选择你的背景色

141414