Dark Mode - Ant Design

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

Comfort of content

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

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 Palette

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 Palette Generator

Additionally, we also provide a set of tools for generating color palettes in dark colors. You need to select your primary color and the background color of the page. We will generate a dark mode color palette 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