Why dark mode matters beyond aesthetics

Dark mode is more than a design trend. For a significant group of users, it’s a functional necessity. People with light sensitivity, migraines, vestibular disorders (e.g., vertigo), and low vision rely on dark mode to use screens comfortably. When a site ignores the OS setting and forces light mode, it creates a barrier for the people who need it.

Start with prefers-color-scheme

The prefers-color-scheme media query reads the user’s OS setting and lets your site respond to it automatically. If a user has set their OS to dark mode, your site follows along without requiring any action from the user.

/* Base light mode styles */
body {
  background-color: #ffffff;
  color: #1a1a1a;
}
/* Dark mode override */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #f0f0f0;
  }
}

Users with light sensitivity and low vision are already making a system-wide decision. They set their OS to dark mode for a reason. A site that ignores that setting forces them to either tolerate discomfort or hunt for a toggle (if one exists at all).

On dark mode toggles

Lea Verou recently wrote two excellent pieces on this topic. Her first argues that two-state toggles beat three-state ones. Her follow-up concludes that the best dark mode toggle is probably none at all – respect the OS setting and put any override in a settings panel rather than permanent header real estate.

For most sites, that’s the right call. Persistent dark mode toggles make sense on developer-facing sites where users are likely tweaking settings. For everyone else, following the OS is sufficient.

One more thing

Dark mode isn’t just inverting colors. Both modes need to meet WCAG contrast requirements independently. White text on a dark background can fail just as easily as dark text on a light background.

Dark mode is an accessibility feature, not just a design preference. Respecting the OS setting costs very little and removes a real barrier for users who depend on it.