Dark Mode (OLED)

Historical Context

OLED changed everything. When Samsung started shipping panels where black pixels literally turn off — zero power draw, zero light bleed — dark mode stopped being an aesthetic preference and became a hardware optimization. That's a fundamentally different conversation than "I like dark backgrounds." Spotify figured this out early. Their near-black UI wasn't just vibes; it was saving battery on every OLED phone in someone's pocket. Discord followed. GitHub shipped their dark mode in 2020 and then quietly added a "dark high contrast" option that pushes closer to true black. The pattern was clear: users on OLED screens wanted deeper blacks than the typical #1a1a1a dark theme could offer. Here's the distinction most people miss: regular dark mode uses dark grays (#121212, #1e1e1e) to avoid eye strain. OLED-optimized dark mode pushes backgrounds to #000000 or damn close to it, because on those panels, true black isn't just darker — it's literally off. Different technology, different design constraints, different rules.

When to Use

Go full OLED dark when your audience is primarily mobile and you know they're on AMOLED screens. Financial dashboards where people stare for hours. Gaming interfaces. Creative tools used in dark studios. But here's the catch — pure #000000 backgrounds cause halation. White text on true black smears for people with astigmatism (that's like 30% of your users). So you need to be intentional. If your app is desktop-first or mixed-device, a standard dark gray is probably smarter. OLED dark is worth the extra effort when battery life and contrast ratio genuinely matter to your users.

Design Principles

• Use #000000 for primary backgrounds but #0a0a0a or #0d0d0d for content surfaces — the 1-2% brightness difference eliminates halation while still triggering OLED pixel-off on most panels.
• Limit text-shadow glow effects to interactive elements and headings only. A subtle 10px spread looks premium on OLED but turns into visual noise if applied to body copy.
• Design elevation through subtle luminance steps, not shadows. On a true black background, box-shadows are invisible — use background-color shifts of 4-8% lightness per elevation level instead.
• Never place pure white (#fff) text directly on pure black (#000). Drop to #e0e0e0 or #ebebeb for body text. Reserve full white for headings and critical UI elements where the contrast punch is intentional.
• Build your dark-to-light transitions with a 150-200ms ease-out and transition background-color separately from text color. OLED pixels turning on/off have different response times than LCD, and staggering prevents the flash effect.

Technical Specs

Related

Minimalismo & Swiss

Exaggerated Minimalism

Temas & Verticais

Inclusive Design

Minimalismo & Swiss

E-Ink / Paper

Brutalismo

Brutalism

Minimalismo & Swiss

Minimalism & Swiss Style