We're live on Product Hunt!Support us
ColorArchive

A curated color library with 5,000+ algorithmically generated colors. Browse, search, save favorites, and export palette tokens — no account required.

CollectionsFamiliesNotesGuidesFree ResourcesConvertColorblindAboutSupportUpdates
Ready for static export
Privacy·Terms·Refunds·Cookies·Commerce Disclosure
colorarchive.org · © 2026 ColorArchive
Skip to content
ColorArchive
ProLog in
ArchiveAll ColorsCollections
Design Systems
Search intent: dark mode color system dark mode design tokens dark ui palette dark mode design dark color system OLED dark mode

Dark Mode Color Systems: A Token Architecture Guide

Dark mode is not an inverted light mode. A guide to building dual-mode color systems from perceptual principles — with design token architecture, OLED optimization, and elevation systems.

Dark ModeDesign SystemsUI Color
Key points
Dark mode is not inverted light mode. Every surface hierarchy encoded through lightness in light mode must be independently re-encoded for dark environments.
OLED displays render #000000 as a physically off pixel — use very dark gray (#0F0F0F–#121212) for primary dark backgrounds to avoid halo effects on text.
Design token architecture with semantic tokens (surface-primary, text-secondary) that resolve to different values per mode is the structural answer to dual-mode color management.

Perceptual Inversion Doesn't Work

In light mode, dark elements advance and light elements recede. In dark mode, the opposite is true: light elements float forward and dark elements recede. This means every surface hierarchy encoded through lightness in light mode must be re-encoded through a different luminance relationship in dark mode. Simply inverting lightness values produces either flat surfaces or clashing interfaces.

OLED Black and Halo Effects

On OLED displays, pure black (#000000) is a physically turned-off pixel — no backlight, no light output at all. This makes pure black backgrounds genuinely black on OLED, but can create halo and smearing effects on text in low-light conditions. Using very dark gray (#0F0F0F to #121212) rather than pure black for primary dark backgrounds is standard OLED-aware dark mode practice.

Semantic Token Architecture

The structural solution to dual-mode color management is semantic design tokens: tokens named for their role (surface-primary, text-secondary, border-default) that resolve to different absolute values in light and dark mode. Binding semantic tokens directly to absolute values — a 'card background' token that always equals #FFFFFF — prevents theming without full refactoring. A theme layer that maps semantic tokens to mode-specific values preserves flexibility.

Elevation in Dark Mode

Light mode encodes elevation through drop shadows that add darkness below components. Dark mode typically inverts this: elevated components are lighter than their background, not darker. Material Design formalized this as an 'overlay' system: elevated surfaces receive a white overlay at increasing opacity per elevation level. This produces the appearance of components floating above the dark background plane through surface-lightening rather than shadow-darkening.

Open next
Dark Mode UI KitBrowse Dark PalettesDesign Systems Guide
Practical next step

Move from the guide into a concrete palette lane

Guides explain the use case. Collections prove the taste. Pro handles the export and implementation layer.

Upgrade to ProMore guides
Related guides
Token Architecture
Design Token Architecture for Color: Building Scalable, Maintainable Systems
A well-structured token architecture makes color systems easier to maintain, theme, and evolve. The three-tier model — primitive, semantic, component — provides the foundation for color systems that survive rebrands, multi-theme requirements, and team scale.
Design Systems Guide
How to Build a Color Token System: The Complete Designer's Guide
A color token system is the infrastructure layer between your abstract brand palette and the code that implements it. Tokens translate color decisions into reusable, maintainable variables that can be updated globally, themed, and exported to any platform. Building a token system is not about adding complexity — it is about removing the hidden complexity that accumulates when colors are hard-coded directly into components.
Design Systems
Naming Colors in Design Systems: Semantic vs. Scale vs. Primitive
How you name colors in a design system shapes how your team reasons about color for years. Semantic names encode intent. Scale names encode position. The two-tier approach separates both concerns. Here is how to choose the right architecture.