Mastering Dark Mode: CSS & JavaScript Techniques for Modern Web Design

Dark mode became a hot topic after macOS introduced a system‑wide dark theme, and developers have been discussing various ways to add dark mode to websites. This article revisits the topic from multiple angles, offering practical implementations.

Dark Mode Is System‑Level

Dark mode is not a new concept; it has existed for a long time. Modern operating systems like macOS let users switch between dark and light skins at the system level, and any application that respects the system setting can automatically follow.

Because dark mode benefits users with visual impairments such as color blindness, web sites aim to align with the system‑level preference by providing a dark theme.

Implementation Principle

Providing dark mode is essentially offering two style sheets (e.g., theme1.css and theme2.css) and letting the user or the system choose which one to apply.

Basic JavaScript Switch

<!-- 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 Implementation of Dark Mode

Modern browsers support the prefers-color-scheme media query, which detects the user’s OS theme preference.

@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); }

To detect browser support:

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

Reduced‑Motion Preference

The prefers-reduced-motion media query can disable animations for users who request less motion.

@media (prefers-reduced-motion: reduce) {
  button { animation: none; }
}

@media (prefers-reduced-motion: no-preference) {
  button { animation: vibrate 0.3s linear infinite both; }
}

New CSS Feature: color-scheme

The color-scheme property informs the browser about the page’s supported color schemes, allowing native form controls to adapt.

/* style.css */
:root { color-scheme: light dark; }

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

Image and Icon Handling

In dark mode, images may need brightness or contrast adjustments. Simple CSS can be used:

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

For SVG icons, use currentColor so the icon inherits the text color.

<svg fill="none" stroke="currentColor" ...> ... </svg>

Filter and Mix‑Blend‑Mode Hacks

When native media queries are unavailable, CSS filters or mix-blend-mode can simulate dark mode.

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

.dark-mode-screen {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: white; mix-blend-mode: difference;
}

Smooth Transition Between Themes

Adding a CSS transition to color variables creates a smooth 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 Toggle

JavaScript can listen to the prefers-color-scheme media query and toggle CSS files or custom properties accordingly.

const mq = window.matchMedia('(prefers-color-scheme: dark)');
mq.addEventListener('change', e => {
  console.log(`Dark mode is ${e.matches ? 'on' : 'off'}.`);
});

While a pure‑CSS solution is preferred, a JS toggle can provide a manual switch or time‑based switching.

Browser Configuration Tips

In Firefox, set ui.systemUsesDarkTheme to 1 via about:config. In Safari, use the built‑in developer tools to preview dark mode. Extensions like Dark Reader can force dark mode on sites that lack native support.

Conclusion

There is no one‑size‑fits‑all solution for dark mode. Developers should choose the approach that best fits their project—whether pure CSS, CSS + JS, or system‑level integration—while paying attention to color contrast, image handling, and accessibility.