Why Dark Mode Has Become Standard
Dark mode used to be a developer novelty—something you'd see in code editors and terminal windows. Now it's everywhere. MacOS defaults to dark mode. iOS and Android support system-wide dark themes. Instagram, Twitter, Slack, Spotify—virtually every major app offers a dark option.
Users want it for different reasons. Some find it easier on the eyes in low-light environments. Others prefer the aesthetic. Some claim it saves battery on OLED screens (it does, slightly). Whatever the motivation, dark mode has become a baseline expectation rather than a premium feature.
But good dark mode isn't just inverting colors. Slapping background: black; color: white on your CSS creates something harsh and unprofessional. Real dark mode design requires understanding contrast, saturation, and visual depth in ways that light mode doesn't demand.
The Fundamentals
Don't Use Pure Black
This is the most common dark mode mistake. Pure black (#000000) creates problems:
#121212, #1a1a1a, or #1F1F1F. These are dark enough to read as "black" but leave room for shadows and elevation. Material Design specifically recommends #121212 as the base dark surface color.
Elevation Equals Lightness
In light mode design, you show depth with shadows. Higher elements cast shadows on lower elements. This is intuitive because it mimics how light works in the physical world.
In dark mode, shadows don't work the same way. A shadow on a dark surface is barely visible—you're putting something dark on something dark. Instead, dark mode uses lightness to convey elevation. Elements that are "higher" and closer to the user are rendered in lighter shades.
Your base background might be #121212. A card sits on top at #1E1E1E. A modal dialog floats above everything at #2C2C2C. The progression from dark to less-dark signals the visual hierarchy.
Desaturate Your Colors
Colors that work beautifully on white backgrounds often become painful on dark backgrounds. A rich, saturated blue that looks great on white will vibrate and strain the eyes when placed on dark gray.
The fix is to desaturate and lighten your accent colors for dark mode. Where you might use Blue 500 in light mode, switch to Blue 300 in dark mode—the same hue but lighter and less saturated.
This applies to all your accent colors: primary buttons, links, highlights, error states. Each needs a dark-mode variant that's easier on the eyes against dark backgrounds.
Accessibility Considerations
Dark mode introduces specific accessibility challenges that don't exist in light mode design.
Contrast Ratios
WCAG (Web Content Accessibility Guidelines) requires a 4.5:1 contrast ratio for normal text and 3:1 for large text. In dark mode, it's easy to accidentally pick a gray text color that looks fine to you but fails accessibility standards.
Test your contrast ratios. Gray text on dark backgrounds is where most dark mode sites fail. If you're using #6B7280 as secondary text on #121212, that's only about 5:1 contrast—barely passing for body text, failing for UI elements.
Focus States
Keyboard users need visible focus indicators to know where they are on the page. The blue focus rings that work on white backgrounds can be invisible or ugly on dark backgrounds.
Consider using glow effects instead of solid outlines for dark mode. A subtle box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4) creates a focus ring that's visible without being jarring.
Images and Logos
Transparent PNG logos designed for light mode often become invisible on dark backgrounds. A logo with dark text and no background suddenly disappears.
You have a few options: create dark-mode variants of key images, add subtle backgrounds behind transparent elements, or use CSS to adjust image brightness in dark mode contexts.
Building Dark Mode with BYOB
When building with BYOB, you can request dark mode styling directly in your prompts. Being specific about the effects you want produces better results.
For glassmorphism cards:"Style the feature cards with a glassmorphism effect. Use a translucent dark background (rgba(30, 30, 30, 0.8)) with a subtle white border (1px solid rgba(255, 255, 255, 0.1)) and a backdrop blur of 12 pixels."For typography:
"Set the primary text color to #EDEDED for headings and important text. Use #A1A1AA for body text and secondary content. Avoid pure white (#FFFFFF) for any text as it creates halation against dark backgrounds."For gradients:
"Add a subtle gradient to the hero section background, going from #0F0F0F at the top to #1A1A1A at the bottom. This creates depth without being distracting."For interactive elements:
"Make buttons have a solid background at rest (#3B82F6) that brightens on hover (#60A5FA). Add a transition of 200ms so the change feels smooth."
Common Dark Mode Patterns
The Netflix Pattern
Netflix uses true black (#000000) because their content is primarily video—the black background makes video content pop. Unless your site is primarily media consumption, this isn't the right choice for you.
The GitHub Pattern
GitHub uses a very dark gray (#0d1117) that's almost black but maintains enough lightness for depth cues. Code blocks and cards appear in slightly lighter grays. This approach works well for content-heavy sites.
The Spotify Pattern
Spotify uses gradients derived from album art against dark backgrounds, creating visual interest without fighting the dark theme. Consider how accent colors can add personality to an otherwise monochromatic design.
Making It Premium
Good dark mode doesn't just work—it feels premium. There's a reason high-end products and luxury brands often use dark color schemes. The association with quality is real.
To achieve that premium feel in dark mode:
- •Use subtle gradients rather than flat colors
- •Add motion thoughtfully (elements that fade in, hover states that transition smoothly)
- •Pay attention to spacing—dark mode often needs more generous whitespace than light mode
- •Use accent colors sparingly; let them mean something when they appear