Your customer is reading your email in their Gmail dark theme. Your logo, designed against white, is sitting in a near-black email pane. Either the logo has been wrapped in a white box (which feels broken) or it's appearing as a dim outline against the dark surface (which also feels broken). Both versions hurt the brand.
Dark mode is no longer optional. Roughly 80% of users have at least one app or context where they prefer dark mode. iOS auto-dark is on for most users. Email clients render in dark mode increasingly often. Your brand assets need to work in both modes, and most brands haven't done this work yet. Here's how.
What "dark mode for brand assets" means in practice
The most important reframe: dark mode isn't a single asset you make. It's a parallel system that mirrors your light-mode brand in a way that's coherent across all touchpoints. You need:
- A dark-mode logo (or proof that the existing logo works on dark)
- Dark-mode color variants for any brand color used as text or for fills
- Photography or imagery that works against dark backgrounds
- Email templates with dark-mode handling
- Documentation that says which version goes where
You don't need to redesign the brand. You need to extend it. The dark-mode versions are derivative of the light-mode versions, not separate brand identities.
Logo: the three approaches
Most logos need a dark-mode treatment. Three options for how:
Approach 1: Single logo that works on both backgrounds. Possible if your logo is monochromatic (a single color that has enough contrast against both light and dark backgrounds). Vellem's V mark uses `currentColor`, which inherits whatever text color the surrounding context provides. Meaning it's dark on light backgrounds and light on dark backgrounds automatically.
This is the cleanest solution when it works. Test: does your logo, rendered in pure black, have a pure white equivalent that's just the color inverted? If yes, you can probably do this approach.
Approach 2: Color-shifted variant. Your logo on dark backgrounds uses adjusted colors. The accent color (like coral) might need to shift to a lighter shade for contrast. The dark elements become light. The brand mark stays recognizable but adapts.
Most brands need this approach. The work is defining the dark-mode color variants once and using them consistently.
Approach 3: Inverted version. A second logo file specifically for dark backgrounds. This works when the logo is too complex to color-shift cleanly. The downside: maintaining two versions in parallel forever.
Colors: define a dark-mode palette
Every brand color used for text or as a fill needs a dark-mode counterpart. Specifically:
Text colors: The same hex code that passes WCAG AA on white usually fails on near-black, and vice versa. You need a light-mode text color (deep enough for white background contrast) and a dark-mode text color (light enough for near-black contrast).
Accent colors: Your brand accent shifts. A saturated coral that works on white often becomes muddy on dark. The dark-mode version is typically lighter and slightly desaturated.
Background colors: Light mode has a paper-white background and bone surfaces; dark mode has a near-black background and slightly-lighter surfaces. The relationships stay parallel but the values invert.
The practical setup: define your brand colors as CSS variables (`--coral-text-light`, `--coral-text-dark`) and switch them based on `prefers-color-scheme`. One palette, two contexts. The same approach works for native apps with theme tokens.
Photography: the often-skipped piece
Brand photography rarely gets a dark-mode treatment, which is why most brands' photography sticks out awkwardly in dark contexts. Three approaches:
Approach 1: Universal photography. Shoot or select photos that work on both backgrounds. Typically photos with neutral backgrounds that don't have a strong "light" or "dark" feeling. This limits your photo style but solves dark mode automatically.
Approach 2: Background-paired photography. Some photos work better on dark, some on light. Pair them deliberately in your layouts. The downside: more curation work for every layout.
Approach 3: Adaptive rendering. CSS filters that adjust photo brightness or contrast based on dark/light mode. Works for some photos, breaks others. Test before committing.
Email templates: where dark mode quietly breaks
Email is the place dark mode most often fails. Apple Mail, Gmail, Outlook each handle dark mode differently. And some clients automatically invert colors in ways your design didn't plan for.
The practical rules:
- Use a single brand color (one color, not multiple) so client auto-inversion at least produces consistent results.
- Use PNG images with transparency for your logo, designed to be legible on both backgrounds.
- Avoid colored backgrounds in email templates that don't have explicit dark-mode handling. Gmail in particular will sometimes invert your designed background.
- Test your transactional emails in light Apple Mail, dark Apple Mail, light Gmail, dark Gmail, and Outlook before you ship. The results will surprise you.
Documentation: keep it simple
The dark-mode work is most useful when it's documented. Add one section to your brand quick-reference doc:
DARK MODE
Logo: Uses currentColor. Adapts to context automatically
Coral: #C73D1F (light mode) / #FFA28A (dark mode)
Ink: #0A0A0B (light mode) / #F6F5F1 (dark mode)
Paper: #FFFFFF (light mode) / #0A0A0B (dark mode)
Bone: #F6F5F1 (light mode) / #16161A (dark mode)
Photos: Stick to neutral backgrounds; avoid heavy white or black photographyThat's the contract. When a team member needs to know which color to use in dark mode, they look at this table. No guessing.
The 30-minute audit
If you've never set up dark mode for your brand, run this audit in half an hour:
- Open your homepage in dark mode (your browser DevTools can simulate this). Does it look right?
- Send yourself a welcome email and read it in a dark email client (Gmail dark theme, or iOS Mail in dark mode). Does the logo look right?
- Open your iOS app or any native app with your branding in dark mode. Does it look right?
- If any of these fail, define what specifically needs a dark-mode variant. Usually it's the logo, two or three colors, and email template handling.
The fix is rarely a full redesign. It's adding the dark-mode pieces to a brand that was light-mode-only by default. Most brands take a few days of focused work and then look professional in both contexts permanently.
Dark mode work is one of those investments that compounds quietly. Once you've set it up correctly, every email, every page, every screen your customer sees works in their preferred mode. They don't notice it specifically. They just feel that your brand is polished. Which is the right outcome.
Your brand kit, ready in 10 minutes.
Five quick taps. Free preview before you pay.
Start building free →