Designing for Dark Mode Without Breaking Your Brand

Users increasingly expect software and websites to respect their system's dark appearance setting, especially in tools they use for hours. Yet many dark themes feel like an afterthought: brand colours that glow uncomfortably, logos that vanish into the background, charts that become unreadable and images framed in harsh white boxes. Good dark mode design keeps your brand recognizable while giving users a comfortable, accessible alternative. This article covers when dark mode is worth doing, how to structure colours so it is maintainable, and the details that separate a polished dark theme from an inverted one.

When dark mode design is worth it

Dark mode is not a requirement for every site. It tends to pay off most for:

• Web applications and dashboards used for long sessions
• Admin panels and internal tools, where staff spend their working day
• Developer, media and creative tools, where dark interfaces are expected
• Products used in low light, such as healthcare or operations tools used on night shifts

For marketing websites, dark mode is a nice-to-have. If your content, speed and accessibility are not yet in good shape, those come first. If you do add dark mode, commit to maintaining it; a broken dark theme hurts trust more than none at all.

Start with semantic colour tokens

The biggest technical decision is how colours are defined. If your styles use raw values, such as a specific hex code for "light grey" scattered across hundreds of rules, dark mode becomes a painful search-and-replace exercise. Instead, define colours by purpose:

Components reference only these tokens. Switching theme then means swapping the token values, typically with CSS custom properties and a prefers-color-scheme media query plus a class or attribute for manual overrides. This approach fits naturally into a lean design system, as we describe in design systems for small teams.

Adapting brand colours

Brand colours designed for white backgrounds rarely work unchanged on dark ones. Saturated colours can appear to vibrate against dark grey, and dark brand colours may lose contrast entirely.

Practical adjustments:

1. Lighten and slightly desaturate primary and accent colours for dark surfaces, keeping the same hue so the brand stays recognizable.
2. Check contrast of text and interactive elements against the dark backgrounds, aiming for WCAG AA ratios. See our guide to accessible web design for the thresholds.
3. Reserve the most saturated colour for small, important elements like primary buttons and focus states, rather than large areas.
4. Document the dark variants in your brand guidelines so marketing and product teams use the same values.

If your brand is built around a dark colour, such as navy or deep green, consider using it as a tinted background in dark mode. That can make the dark theme feel more on-brand than neutral grey.

Surfaces, elevation and depth

In light themes, shadows separate layers. On dark backgrounds, shadows are much less visible, so elevation is usually expressed by making raised surfaces slightly lighter:

• Page background is the darkest layer.
• Cards and panels sit one step lighter.
• Menus, dropdowns and modals sit a further step lighter.
• Subtle borders help separate adjacent surfaces of similar tone.

Avoid pure black backgrounds with pure white text for long reading; most interfaces use dark greys and off-white text to reduce harshness.

Images, logos and illustrations

Visual assets are where dark themes most often break.

• Logos: prepare approved light or reversed versions for dark backgrounds. Never invert the logo automatically.
• Product photos with white backgrounds: either place them in a deliberately light card, or prepare transparent-background versions.
• Illustrations and icons: use colours from your tokens where possible, especially for SVG icons, so they adapt automatically.
• Screenshots: consider providing dark versions of interface screenshots in documentation.
• Bright imagery: very bright hero images can be dazzling in a dark interface; a subtle overlay or reduced brightness can help, but test it.

Charts and data visualization

Dashboards need special care:

• Define separate chart palettes for light and dark, tested for contrast against each background.
• Use lighter gridlines and axis labels that remain readable without dominating.
• Make sure categorical colours remain distinguishable for people with colour-vision deficiencies in both themes.
• Avoid relying on colour alone; use labels, patterns or direct annotations.

Key takeaway: Dark mode succeeds or fails on structure. Define colours by purpose, adapt brand colours deliberately for dark surfaces, prepare dedicated logo and image variants, and test contrast in both themes before shipping.

Respecting user preference

A considerate implementation:

1. Follows the operating system's preference by default.
2. Offers a visible toggle, often with three options: light, dark and system.
3. Remembers the choice across visits.
4. Avoids a flash of the wrong theme when the page loads, by applying the theme before content renders.
5. Applies the theme to all parts of the experience, including emails and generated documents where practical, or at least makes sure they remain readable.

Dark mode in practice: a rollout plan

For an existing product, adding dark mode is easier to manage in stages:

1. Audit colour usage. Find every hard-coded colour value in your styles and components. This is often the biggest single task.
2. Introduce semantic tokens and migrate components to use them, without changing the light theme's appearance.
3. Define dark values for each token, then review them against brand guidelines and contrast requirements.
4. Prepare assets: dark-background logo versions, transparent product images and adapted illustrations.
5. Enable dark mode behind a toggle for internal users or a small group first, and collect feedback.
6. Fix the long tail: modals, error pages, empty states, printed views and email templates.
7. Release to everyone, respecting the system preference by default.

Step two is valuable even if dark mode is postponed, because a token-based colour system makes future brand updates much cheaper.

Testing your dark theme

Dark mode multiplies the number of states to check. Include it in your normal testing:

• Review every template and component in both themes.
• Check form states: focus, error, disabled and selected.
• Test with real content, including user-uploaded images.
• Check third-party embeds such as maps, video players and chat widgets, which may not support dark themes.
• Test on different screens, including phones in low light, where harsh contrast is most noticeable.
• Run contrast checks with automated tools, then confirm visually.

Common mistakes

• Inverting colours with a CSS filter instead of designing a theme
• Using the light-theme brand colour unchanged on dark backgrounds
• Forgetting focus states, which can become invisible
• Leaving white-background images that glare inside dark layouts
• Shipping dark mode for the main pages but not settings, modals or error pages
• Making dark mode default for everyone without respecting user preference

Next steps

DigiVort builds web applications and admin panels with token-based theming, so light and dark modes stay consistent with your brand as the product grows. If you are planning a dashboard or platform, see our web applications and SaaS service or our UI/UX design service, or describe your product through the project wizard.