How to perfect color design for dark mode

-

Why color balance matters in dark mode

When you activate dark mode, it is not just about flipping the background to black and text to white. Poorly balanced colors can cause eye strain, make content hard to read, and even break your site's visual identity. The goal is to create a comfortable reading environment that still feels like your brand.

For Mediumish, a content-first theme, you want readers to stay focused on the article. This means subtle backgrounds, clear text contrast, and carefully chosen accents that stand out without overwhelming the eyes.

Choosing the right background shades

Instead of pure black (#000000), use deep but slightly muted tones. This reduces glare and makes text appear smoother. For example:

In your CSS variables, define a --bg and --surface color. The --bg is for the outer page, while --surface is for content blocks like cards or post bodies.

:root[data-theme="dark"]{
  --bg: #0b0f12;
  --surface: #121417;
}

Optimizing text and contrast ratios

For body text, pure white (#ffffff) can be too bright. Instead, use slightly softened tones like #e6eef8 or #f0f3f7. These provide enough contrast without the harshness.

Use a contrast checker to ensure your text meets WCAG standards (minimum ratio 4.5:1 for normal text). Mediumish users often have large body font sizes, so slightly lower contrast may still be acceptable, but accessibility compliance is always better.

:root[data-theme="dark"]{
  --text: #e6eef8;
  --muted: #9aa7b5;
}

Bright blues like #1a73e8 can still work in dark mode, but may need lightening or desaturation. For example, #66a6ff feels softer yet still stands out against dark backgrounds.

Accents for buttons, highlights, or call-to-action sections should be tested for both visibility and harmony. Avoid neon shades unless your brand identity requires it — they can strain the eyes.

:root[data-theme="dark"]{
  --link: #66a6ff;
  --accent: #f9d65c;
}

Handling images and logos for dark mode

Dark mode can make some images look strange, especially if they have transparent backgrounds or dark edges. Solutions include:

  • Providing a dedicated dark-mode version of the logo with lighter colors.
  • Using CSS filter to adjust brightness for monochrome icons.
  • Adding subtle borders or shadows to separate images from the dark background.

Example for inverting icons in dark mode:

:root[data-theme="dark"] img.icon{
  filter: invert(1) hue-rotate(180deg) brightness(1.1);
}

Testing and validating color accessibility

Once your palette is in place, test it thoroughly:

  1. Check in multiple devices — OLED, LCD, and mobile screens handle dark mode differently.
  2. Use tools like Lighthouse or Accessibility Insights to check contrast scores.
  3. Test in various lighting conditions: bright daylight, dim room, and complete darkness.

Remember, what looks perfect on your monitor may look too dim or too bright on another device.

FAQ

Q: Can I just use pure black and white?

A: Technically yes, but it's not recommended for long reading sessions. Slightly softened tones are easier on the eyes.

Q: How many colors should I define for dark mode?

A: At least background, surface, text, muted, link, accent, and border colors. More if your site has complex components.

Q: Should images be recolored for dark mode?

A: Only if they lose visibility. Logos and icons are the most common assets that need adjustment.

Comments

Post a Comment