Dark Mode Implementation: Complete Guide for 2027

Quick answer: To implement dark mode, use CSS custom properties (variables) for colors, detect user preference with prefers-color-scheme media query, provide a manual toggle, store preference in localStorage, and use the color-scheme meta tag. Ensure all text meets 4.5:1 contrast in both modes. Test images (screenshots need dark variants), form inputs, and third-party widgets. In 2027, 80%+ of users prefer dark mode on mobile. Use color-scheme: light dark in CSS for automatic scrollbar/form styling.[1][3][4]

Dark mode is no longer a nice-to-have feature — it's expected. With 80%+ of mobile users preferring dark mode, implementing it correctly is essential for user experience and accessibility.

Implementation approaches

1. CSS custom properties (recommended)

:root {
  --bg-primary: #ffffff;
  --text-primary: #1a1a1a;
  --accent: #0066cc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a1a1a;
    --text-primary: #e0e0e0;
    --accent: #5cffb0;
  }
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

2. Manual toggle with JavaScript

// Check saved preference or system preference
const savedTheme = localStorage.getItem('theme');
const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const isDark = savedTheme === 'dark' || (!savedTheme && systemDark);

document.documentElement.classList.toggle('dark', isDark);

// Toggle button
document.getElementById('theme-toggle').addEventListener('click', () => {
  const isDark = document.documentElement.classList.toggle('dark');
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
});

3. CSS with class toggle

:root {
  --bg: #ffffff;
  --text: #1a1a1a;
}

.dark {
  --bg: #1a1a1a;
  --text: #e0e0e0;
}

body {
  background: var(--bg);
  color: var(--text);
}

Color-scheme meta tag

Tell the browser to style native elements (scrollbars, form inputs, selects) for dark mode:

<meta name="color-scheme" content="light dark">

Or in CSS:

:root {
  color-scheme: light dark;
}

This automatically styles native UI elements (scrollbars, form controls, dialogs) for the current theme.[3]

Dark mode color palette

Light mode → Dark mode mapping

Design principles for dark mode

1. Don't use pure black (#000000): Use dark gray (#1a1a1a) to reduce eye strain
2. Reduce white intensity: Use off-white (#e0e0e0) instead of pure white for text
3. Desaturate colors: Bright colors on dark backgrounds cause eye strain. Reduce saturation by 10-20%
4. Adjust shadows: Dark mode shadows should be darker and more subtle
5. Handle images: Screenshots with white backgrounds need dark variants or borders[3][4]

Image handling in dark mode

Screenshots

Screenshots with white backgrounds look jarring in dark mode:

/* Add a subtle border or background */
.screenshot {
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

/* Or provide dark variant */
.dark .screenshot {
  filter: brightness(0.8) contrast(1.2);
}

Logos

Provide dark mode variants:

<picture>
  <source srcset="logo-dark.svg" media="(prefers-color-scheme: dark)">
  <img src="logo-light.svg" alt="Logo">
</picture>

Icons

Use SVG icons with currentColor — they automatically adapt:

.icon { fill: currentColor; }

Form elements in dark mode

Native form elements (inputs, selects, checkboxes) are styled by the browser. Use color-scheme to ensure they match:

:root { color-scheme: light dark; }

For custom-styled forms:

input, textarea, select {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

input:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
}

Third-party widgets

Third-party widgets (chat, ads, embeds) may not support dark mode:

• Chat widgets: Most (Intercom, Zendesk) support dark mode via API
• Ads: Google AdSense supports dark mode (auto-detects)
• Social embeds: Twitter/Instagram embeds don't support dark mode — use facades
• Maps: Google Maps supports dark mode via API parameter[3]

Testing dark mode

Chrome DevTools

1. Open DevTools (F12)
2. Click the three dots → More tools → Rendering
3. Set "Emulate CSS media feature prefers-color-scheme" to "dark"
4. Test all pages

Manual testing

• Toggle between light and dark modes
• Check all pages, components, and states
• Test form inputs, buttons, modals, tooltips
• Verify images and screenshots
• Check email templates (if applicable)[3][4]

Performance considerations

Avoid flash of wrong theme (FOWT)

Prevent the page from flashing light mode before switching to dark:

<!-- In <head>, before any CSS -->
<script>
  (function() {
    const theme = localStorage.getItem('theme');
    const isDark = theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches);
    if (isDark) document.documentElement.classList.add('dark');
  })();
</script>

Place this script in the <head> to apply the theme before the page renders.[3]

CSS bundle size

Dark mode adds ~10-20% to CSS size (additional color variables). Use CSS custom properties to minimize duplication.[3]

Frequently Asked Questions (FAQ)

Should I implement dark mode?

Yes, if your audience is tech-savvy or uses your site at night. In 2027, 80%+ of mobile users prefer dark mode. It's expected for modern websites.[3][4]

How do I detect user's theme preference?

Use window.matchMedia('(prefers-color-scheme: dark)') in JavaScript or @media (prefers-color-scheme: dark) in CSS. Also check localStorage for manual toggle preference.[3]

Should I use pure black (#000000) for dark mode backgrounds?

No. Pure black causes eye strain and makes text harder to read. Use dark gray (#1a1a1a or #0b1216) for backgrounds.[3]

How do I handle images in dark mode?

Provide dark variants for logos and screenshots. Use CSS filters for simple adjustments. Ensure images have appropriate borders/backgrounds to avoid jarring white rectangles.[3]

Does dark mode affect performance?

Minimal impact. Additional CSS variables add ~10-20% to CSS size. The JavaScript toggle is negligible. Use CSS custom properties to minimize duplication.[3]

How do I prevent flash of wrong theme?

Place a small inline script in the <head> that checks localStorage and system preference, then applies the theme class before the page renders.[3]

Should I support system preference or manual toggle?

Both. Default to system preference (prefers-color-scheme), but provide a manual toggle for users who want to override. Store the manual preference in localStorage.[3][4]

Does dark mode affect SEO?

Not directly. But dark mode improves user experience (longer time on page, lower bounce rate), which indirectly affects SEO. Also, Google's Lighthouse doesn't penalize dark mode.[3][4]

Related reading on MintSaaS

• How to Design Accessible Websites: WCAG 2.2 Guide
• Color Contrast: How to Meet Accessibility Standards
• How to Improve Website Speed: Complete Performance Guide

Sources

[1] MDN Web Docs — prefers-color-scheme: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

[2] Web.dev — Dark mode: https://web.dev/articles/prefers-color-scheme

[3] MintSaaS Image Compressor: https://www.mintsaas.net/products/image-compressor

[4] Web.dev — Core Web Vitals: https://web.dev/vitals/

[5] MintSaaS PDF Compressor: https://www.mintsaas.net/products/pdf-compressor

Free tools on MintSaaS

Try our free tools to put this guide into practice:

• Image Compressor
• PDF Compressor
• Image Converter
• MintSaaS Home
• MintSaaS Blog
• How to Compress Images