UI/UX Design Dark Mode

Dark mode shows light text and interface elements on a dark background. Operating systems, mobile apps, and websites now offer it as a standard option. Many users choose it to reduce glare in dim rooms, to save battery on certain screens, or simply because they like the look. Good dark mode design takes more than inverting colors.

Why Users Want Dark Mode

• Comfort in low light: A bright white screen feels harsh at night. A dark screen feels calmer.
• Battery savings on OLED screens: Dark pixels use less power on these displays.
• Personal preference: Some people find dark interfaces easier to read for long sessions.
• Accessibility needs: Some users with light sensitivity prefer dark themes.

Why Inverting Colors Fails

A quick inversion turns white into black and black into white. Brand colors shift into odd shades. Images look like photo negatives. Shadows disappear. Text contrast swings to extremes that tire the eyes. A real dark theme needs its own carefully chosen palette.

Building a Dark Palette

Use Dark Gray, Not Pure Black

Pure black backgrounds create harsh contrast against white text and cause a smearing effect on some displays. Dark gray tones such as deep charcoal feel softer and leave room for darker shades to show depth.

Soften the Text

Pure white text on a dark background glows and strains the eye. Off-white or light gray text keeps readability high and reduces fatigue.

Desaturate Accent Colors

A vivid blue that looks great on white can vibrate on dark. Lighten and slightly mute accent colors for dark mode so they stay comfortable.

Show Depth With Lightness

Shadows barely register on dark surfaces. Raise elements by making them slightly lighter than the layer beneath. Higher layers look lighter; lower layers look darker.

Diagram: Elevation Through Lightness

LIGHT MODE                      DARK MODE
(depth = shadow)                (depth = lighter surface)

+------------------+            +------------------+
| Page   (white)   |            | Page   (#121212) |  Level 0
|  +------------+  |            |  +------------+  |
|  | Card       |  |            |  | Card       |  |  Level 1
|  | + shadow   |  |            |  | (#1E1E1E)  |  |
|  |  +------+  |  |            |  | +----------+  |
|  |  |Menu  |  |  |            |  | |Menu      |  |  Level 2
|  |  +------+  |  |            |  | |(#2A2A2A) |  |
|  +------------+  |            |  +------------+  |
+------------------+            +------------------+

Contrast Still Rules

Accessibility standards ask for a contrast ratio of at least 4.5 to 1 for normal text. Dark themes need the same check as light themes. Test every text and background pair, including gray helper text and disabled states. Low-contrast gray on dark gray looks stylish in a mockup and unreadable in daylight.

Handling Images, Icons, and Charts

• Images: Bright photos can glare against a dark page. Dim them slightly or add a subtle overlay.
• Icons: Switch dark icons to light versions. Keep line weight consistent.
• Logos: Prepare a dark-background version of the logo with proper contrast.
• Charts: Choose chart colors that stay distinguishable on dark backgrounds, and add labels so color is not the only signal.

Giving Users Control

Offer three choices: light, dark, and follow system. The system option reads the device setting and switches automatically at night. Save the choice so the app remembers it on every visit. Never force a theme on someone who set a preference elsewhere.

Design Tokens Make Theming Easy

Name colors by purpose rather than by value. A token called "surface" holds white in light mode and charcoal in dark mode. Components reference the token, so one switch updates the whole interface. Teams that name colors "blue-500" everywhere face painful rework when a second theme arrives.

TOKEN              LIGHT VALUE     DARK VALUE
text-primary       #1A1A1A         #E8E8E8
surface            #FFFFFF         #1E1E1E
background         #F5F5F5         #121212
accent             #1A5FD0         #7FA8F0
border             #DDDDDD         #3A3A3A

Key Points

• Dark mode needs its own palette; color inversion produces poor results
• Dark gray backgrounds and off-white text reduce eye strain
• Lighter surfaces express elevation where shadows fail
• Contrast ratios must pass accessibility checks in both themes
• Semantic design tokens make multi-theme support manageable
• Give users light, dark, and system options