logoReady Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
1.0.26
  • 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
    • Template Document
      • Form Page
      • Visualization Page
      • Detail Page
    • Principles
      • Proximity
      • Alignment
      • Contrast
      • Repetition
      • Make it Direct
      • Stay on the Page
      • Keep it Lightweight
      • Provide an Invitation
      • Use Transition
      • React Immediately
  • 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
When to use
Design Principles
Color
Color Palette
Color Palette Generator
IconsShadow

Resources

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

Community

Awesome Ant Design
Medium
Twitter
yuqueAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTechMore Products

yuqueYuQue-Document Collaboration Platform
AntVAntV-Data Visualization
EggEgg-Enterprise Node.js Framework
kitchenKitchen-Sketch Toolkit
xtechAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community

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

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