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.
