Dark mode settings have gained popularity over the last few years. The option to toggle between a light and dark colour scheme has been available in apps and operating systems separately for a number of years. Recently there has been a push to try and implement a system where this setting can be set once at an operating system level and have other apps and website adhere to that setting. Let's investigate how we can write CSS to have our websites obey the global dark mode setting.

All the major operating systems now have dark mode settings in their display preferences.

We can detect and set the background and font colours using the new prefers-color-scheme @media query.

body {
  color: #333;
  background: #fff;
}
a {
  color: #0033cc;
}

@media (prefers-color-scheme: dark) {
  body {
    color: #e1e1e1;
    background: #121212;
  }

  body a {
    color: #809fff;
  }
}

If the user has dark mode enabled in their system settings this code will present them the dark mode colour scheme, otherwise they will see the default colour scheme. There is no need to resort to javascript or server-side scripting to make this work any more.

Adhering to global dark mode is most important for sites and apps that people spend a lot of time on, however given how easy this is to implement I'd consider it good house keeping and considerate design to implement this on nearly all sites where it's suitable.