logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Ant Design
    • Introduction
    • Design Values
    • Cases
  • Global Styles
    • Colors
    • Layout
    • Font
    • Icons
    • Dark Mode
    • Shadow
  • Design Patterns
    • Overview
    • Global Rules
      • Feedback
      • Navigation
      • Data Entry
      • Data Display
      • Copywriting
      • Data format
      • Button
      • Data List
    • Principles
      • Proximity
      • Alignment
      • Contrast
      • Repetition
      • Make it Direct
      • Stay on the Page
      • Keep it Lightweight
      • Provide an Invitation
      • Use Transition
      • React Immediately
    • Template Document
      • Visualization Page
      • Detail Page
  • Design Patterns (Research)
    • Overview
    • Template Document
      • Form Page
      • Workbench
      • List Page
      • Result Page
      • Exception Page
    • Global Rules
      • Navigation
      • Message and Feedback
      • Empty Status
  • Visualization
  • Motion
  • Illustrations

Dark Mode

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

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