Dark Mode for Brand-led Sites: When It Helps, When It Hurts, How to Ship It Cleanly
Dark mode is expected by visitors but poorly implemented on most brand sites. Here is when to build it, when to skip it, and how to do it properly.
The Expectation
Dark mode has moved from a developer preference to a mainstream user expectation. In 2026, roughly 40 to 50% of web visitors have their operating system set to dark mode, based on widely reported aggregate prefers-color-scheme data. That number is not niche enough to ignore.
But "users expect dark mode" does not mean every brand site should have one. Dark mode done well is a meaningful improvement in usability and brand perception. Dark mode done poorly damages brand integrity, introduces visual bugs, and creates ongoing maintenance burden that studios underestimate.
This article is about making the decision deliberately and implementing it properly when you decide to ship it.
When Dark Mode Helps
Portfolio sites with photography. Photography looks striking on dark backgrounds. The dark surround eliminates the visual competition from a white page and lets the images dominate the viewport. This is why most photography portfolio tools (Adobe Portfolio, Format, Cargo) default to dark themes.
Sites visited in low-light environments. If your audience frequently visits your site in the evening or in dimly lit spaces (common for creative professionals browsing portfolios after hours), dark mode reduces eye strain and screen glare.
Sites with strong monochromatic brand identity. If the brand already uses near-black as a primary color, dark mode is a natural extension rather than a forced adaptation.
Sites with significant reading content. Long-form journal articles and documentation are easier to read on dark backgrounds for many users, especially at night. Providing the choice respects user preference.
When Dark Mode Hurts
Brands with color-dependent identity. If the brand's identity relies on specific background colors (a warm cream, a bright white, a distinctive tint), dark mode changes the foundation of the visual language. The brand no longer feels like the brand.
Sites with complex color palettes. A brand system with five or six carefully tuned colors may not invert cleanly. Colors chosen for light backgrounds can look garish or lose contrast on dark backgrounds. Fixing this means maintaining two complete color systems.
Sites with mixed media. If the site includes screenshots, document embeds, or user-generated content with white backgrounds, these elements create jarring bright rectangles in a dark layout. Every embedded element needs dark-mode treatment, which is not always possible.
Small teams without maintenance bandwidth. Dark mode doubles the surface area for visual bugs. Every new component, every new page, every content update needs to be tested in both modes. If the team does not have the discipline to do this, dark mode will degrade over time.
The Implementation
CSS custom properties
The cleanest dark mode implementation uses CSS custom properties that switch based on the user's preference:
```
:root {
--color-bg: #faf8f5;
--color-fg: #1a1a1a;
--color-fg-muted: #666666;
--color-bg-alt: #f0ede8;
--color-rule-light: #e0ddd8;
}
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #141414;
--color-fg: #e8e6e3;
--color-fg-muted: #999999;
--color-bg-alt: #1e1e1e;
--color-rule-light: #333333;
}
}
```
Every component on the site references these variables. Switching from light to dark means changing the variable values, not rewriting component styles. This is the approach we discussed in the design systems article.
Do not invert colors mathematically
A common mistake is computing dark mode colors by inverting the lightness of the light mode colors. This produces technically valid but aesthetically wrong results. Dark backgrounds should not be pure black (#000000). Dark mode text should not be pure white (#ffffff). The tones need to be tuned for the dark context just as carefully as the light mode tones were tuned for the light context.
Good dark mode palettes use:
- Near-black backgrounds (#111 to #1a1a1a) rather than pure black
- Off-white text (#e0e0e0 to #ebebeb) rather than pure white
- Slightly desaturated accent colors compared to light mode
- Subtle tint in the background (warm gray, cool gray) that matches the brand's personality
Images and photography
Photography generally works well on dark backgrounds without modification. But images with transparent backgrounds, thin white borders, or light-colored edges can look disconnected or ghostly in dark mode.
Screenshots and UI mockups often have white backgrounds that create bright rectangles. Options:
- Add a subtle border or shadow around images in dark mode
- Invert screenshots that are purely UI (using CSS
filter: invert()) though this is fragile - Accept the bright rectangles as a constraint and design the layout to accommodate them
SVGs and icons
SVG icons that use currentColor for their fills automatically adapt to dark mode because they inherit the text color. SVGs with hard-coded fill colors need dark mode variants or conditional fill logic.
Contrast checking
Every text-background combination must meet WCAG contrast requirements in both light and dark modes. This is twice the work but non-negotiable. Use a contrast checker that supports both color schemes and audit systematically, not spot-checking individual elements.
The Manual Toggle
In addition to respecting prefers-color-scheme, many sites offer a manual toggle that lets users override their system preference. This is good practice because:
- Some users prefer dark mode globally but want specific sites in light mode
- Some users have not set a system preference and want to choose
- Some users are in a bright environment where their system is set to dark mode by default
Implement the toggle by adding a data attribute to the element and using it in CSS selectors:
```
html[data-theme="dark"] {
--color-bg: #141414;
--color-fg: #e8e6e3;
/ ... /
}
```
Store the preference in localStorage so it persists across visits. Apply it before the first paint (in a