Dark Mode

Dark mode is a theme where all UI elements are darkened.

When to use#

  • Dark mode is recommended when you are in a dark environment as it prevents eye strain.

  • Dark mode is great for highlighting important content

    It works similarly to turning off the lights in a movie theater.

Design Principles#

  1. Comfort of content

Avoid using highly contrasting colors or content in dark mode. Continuous use will bring fatigue.

  1. Consistency of Information

The information content in the dark mode needs to be consistent with the light mode, and the initialization hierarchical relationship should not be broken.

Color#

In the application of colors, we are based on 12 sets of basic swatches and combine longer rule processing to make colors better blend under different environmental colors.

Color Pallete#

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 Pallete Generator#

Additionally, we also provide a set of tools for generating color palletes in dark colors. You need to select your primary color and the background color of the page. We will generate a dark mode color pallete for you.

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
Pick your primary color
#1890ff
Pick your background color
#141414
IconsOverview