Mastering Dark Mode: CSS & JavaScript Techniques for Seamless Light/Dark Switching

Dark Mode Is System‑Level

Dark and light visual themes were introduced at the OS level by macOS, allowing applications that support these modes to switch automatically based on the system setting.

Why Implement Dark Mode on the Web

System‑level themes improve accessibility for users with visual impairments such as color blindness, so web sites should align with the OS dark/light preferences.

Implementation Principle

Providing two CSS files (e.g., theme1.css and theme2.css) lets the site offer both light and dark skins.

<!-- HTML -->
<link rel="stylesheet" href="../theme1.css" id="theme_css" />
<script>
  document.getElementById('buttonID').addEventListener('click', function(){
    document.getElementById('theme_css').href = '../theme2.css';
  });
</script>

CSS Media Query prefers-color-scheme

The @media (prefers-color-scheme: dark) query detects a user’s dark‑mode preference, while light and no-preference cover other cases.

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #111416;
    --text-color: #ccc;
    --link-color: #f96;
  }
}

:root {
  --background-color: #fff;
  --text-color: #333;
  --link-color: #b52;
}

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

Detecting Browser Support

if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
  console.log('Browser supports dark mode');
}

Loading Strategy

Separate CSS files for common styles ( style.css), dark theme ( dark.css) and light theme ( light.css) can be conditionally loaded with the media attribute to avoid unnecessary downloads.

<!-- Script -->
if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
  document.documentElement.style.display = 'none';
  document.head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \"\"">');
}
<!-- HTML -->
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="/light.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)">

CSS color-scheme Property

The new color-scheme property tells browsers which color themes the page supports, improving form control rendering in dark mode.

/* style.css */
:root { color-scheme: light dark; }
body { color: var(--color); background-color: var(--background-color); }

Filters and Mix‑Blend‑Mode

For quick dark‑mode effects you can invert colors with filter: invert(100%) hue-rotate(180deg) or use mix-blend-mode: difference on an overlay.

.theme-dark { filter: invert(100%) hue-rotate(180deg); }
.theme-dark img { filter: invert(100%) hue-rotate(180deg); }

Image and Icon Adjustments

Adjust image brightness in dark mode, exclude SVG icons, or use CSS variables to let users fine‑tune filters.

@media (prefers-color-scheme: dark) {
  img:not([src*=".svg"]) { filter: brightness(.8) contrast(1.2); }
}

For SVG icons, set fill and stroke to currentColor and change color in the dark theme.

svg { color: var(--text-color); }

Smooth Transitions

Add CSS transitions to color and background changes for a graceful switch.

body {
  --duration: 0.5s;
  --timing: ease;
  color: var(--color);
  background-color: var(--background-color);
  transition: color var(--duration) var(--timing), background-color var(--duration) var(--timing);
}

JavaScript Dark/Light Switch

JavaScript can listen to prefers-color-scheme changes, toggle CSS files, or let users manually select a theme.

const mq = window.matchMedia('(prefers-color-scheme: dark)');
mq.addListener(e => console.log('Dark mode', e.matches));

Browser Configuration

In Firefox, set ui.systemUsesDarkTheme=1 via about:config. Safari provides built‑in tools to preview dark mode.

Conclusion

Multiple approaches—pure CSS, CSS + JavaScript, system‑level media queries, filters, and custom properties—allow developers to implement dark mode suited to their project’s needs, balancing performance, accessibility, and visual quality.

Further Reading

Prefers‑color‑scheme guide

CSS‑Tricks dark mode article

Implementing Dark Mode for My Website