暗黑模式 - Ready Design

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

何时使用

当需要长时间在暗光环境下工作时，建议使用暗黑模式，减小亮度对比带来的视觉压力，保证使用者的体验舒适。
当需要沉浸式的专注工作内容时，建议使用暗黑模式，可以帮助使用者更关注凸显出来的内容和操作。
如同在电影院看电影时要全场关灯，是一样的原理。

设计原则

内容的舒适性
暗黑模式下避免使用对比很强的色彩或内容，长时间使用会带来疲劳感。
信息的一致性
暗黑模式下的信息内容需要和浅色模式保持一致性，不应该打破原有的层级关系。

色彩

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

基础色板

Ready Red / Ready RedReady Red

red-100

red-200

red-300

red-400

red-500

Ready Green / Ready GreenReady Green

green-100

green-200

green-300

green-400

green-500

Ready Blue / Ready BlueReady Blue

blue-100

blue-200

blue-300

blue-400

blue-500

Mint / MintReady's Mint

mint-100

mint-200

mint-300

mint-400

mint-500

mint-600

mint-700

Blue Purple / Blue PurpleReady's Blue Purple

bluePurple-100

bluePurple-200

bluePurple-300

bluePurple-400

bluePurple-500

bluePurple-600

bluePurple-700

Light Indogo / Light IndogoReady's Light Indogo

lightIndogo-100

lightIndogo-200

lightIndogo-300

lightIndogo-400

lightIndogo-500

lightIndogo-600

lightIndogo-700

Lemon Yellow / Lemon YellowReady's Lemon Yellow

lemonYellow-100

lemonYellow-200

lemonYellow-300

lemonYellow-400

lemonYellow-500

lemonYellow-600

lemonYellow-700

Yellowish Green / Yellowish GreenReady's Yellowish Green

yellowishGreen-100

yellowishGreen-200

yellowishGreen-300

yellowishGreen-400

yellowishGreen-500

yellowishGreen-600

yellowishGreen-700

Dark Gray / Dark GrayReady's Dark Gray

darkgray-100

darkgray-200

darkgray-300

darkgray-400

darkgray-500

darkgray-600

darkgray-700

色板生成工具

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

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