Ant Design React 暗黑模式
2023-09-27 16:25 更新
暗黑模式是指把所有 UI 换成黑色或者深色的一个主题模式。
何时使用
- 当需要长时间在暗光环境下工作时，建议使用暗黑模式，减小亮度对比带来的视觉压力，保证使用者的体验舒适。
- 当需要沉浸式的专注工作内容时，建议使用暗黑模式，可以帮助使用者更关注凸显出来的内容和操作。
如同在电影院看电影时要全场关灯，是一样的原理。
设计原则
-
内容的舒适性
暗黑模式下避免使用对比很强的色彩或内容，长时间使用会带来疲劳感。
-
信息的一致性
暗黑模式下的信息内容需要和浅色模式保持一致性，不应该打破原有的层级关系。
色彩
颜色的应用上，我们基于 12 套基础色板，并结合透明度规则处理，来让色彩在不同的环境色下可以更好融合。
基础色板
Dust Red / 薄暮斗志、奔放
red-1#2a1215
red-2#431418
red-3#58181c
red-4#791a1f
red-5#a61d24
red-6#d32029
red-7#e84749
red-8#f37370
red-9#f89f9a
red-10#fac8c3
Volcano / 火山醒目、澎湃
volcano-1#2b1611
volcano-2#441d12
volcano-3#592716
volcano-4#7c3118
volcano-5#aa3e19
volcano-6#d84a1b
volcano-7#e87040
volcano-8#f3956a
volcano-9#f8b692
volcano-10#fad4bc
Sunset Orange / 日暮温暖、欢快
orange-1#2b1d11
orange-2#442a11
orange-3#593815
orange-4#7c4a15
orange-5#aa6215
orange-6#d87a16
orange-7#e89a3c
orange-8#f3b765
orange-9#f8cf8d
orange-10#fae3b7
Calendula Gold / 金盏花活力、积极
gold-1#2b2111
gold-2#443111
gold-3#594214
gold-4#7c5914
gold-5#aa7714
gold-6#d89614
gold-7#e8b339
gold-8#f3cc62
gold-9#f8df8b
gold-10#faedb5
Sunrise Yellow / 日出出生、阳光
yellow-1#2b2611
yellow-2#443b11
yellow-3#595014
yellow-4#7c6e14
yellow-5#aa9514
yellow-6#d8bd14
yellow-7#e8d639
yellow-8#f3ea62
yellow-9#f8f48b
yellow-10#fafab5
Lime / 青柠自然、生机
lime-1#1f2611
lime-2#2e3c10
lime-3#3e4f13
lime-4#536d13
lime-5#6f9412
lime-6#8bbb11
lime-7#a9d134
lime-8#c9e75d
lime-9#e4f88b
lime-10#f0fab5
Polar Green / 极光绿健康、创新
green-1#162312
green-2#1d3712
green-3#274916
green-4#306317
green-5#3c8618
green-6#49aa19
green-7#6abe39
green-8#8fd460
green-9#b2e58b
green-10#d5f2bb
Cyan / 明青希望、坚强
cyan-1#112123
cyan-2#113536
cyan-3#144848
cyan-4#146262
cyan-5#138585
cyan-6#13a8a8
cyan-7#33bcb7
cyan-8#58d1c9
cyan-9#84e2d8
cyan-10#b2f1e8
Daybreak Blue / 拂晓蓝包容、科技、普惠
blue-1#111a2c
blue-2#112545
blue-3#15325b
blue-4#15417e
blue-5#1554ad
blue-6#1668dc
blue-7#3c89e8
blue-8#65a9f3
blue-9#8dc5f8
blue-10#b7dcfa
Geek Blue / 极客蓝探索、钻研
geekblue-1#131629
geekblue-2#161d40
geekblue-3#1c2755
geekblue-4#203175
geekblue-5#263ea0
geekblue-6#2b4acb
geekblue-7#5273e0
geekblue-8#7f9ef3
geekblue-9#a8c1f8
geekblue-10#d2e0fa
Golden Purple / 酱紫优雅、浪漫
purple-1#1a1325
purple-2#24163a
purple-3#301c4d
purple-4#3e2069
purple-5#51258f
purple-6#642ab5
purple-7#854eca
purple-8#ab7ae0
purple-9#cda8f0
purple-10#ebd7fa
Magenta / 法式洋红明快、感性
magenta-1#291321
magenta-2#40162f
magenta-3#551c3b
magenta-4#75204f
magenta-5#a02669
magenta-6#cb2b83
magenta-7#e0529c
magenta-8#f37fb7
magenta-9#f8a8cc
magenta-10#fad2e3
以上内容是否对您有帮助：
更多建议：