Dark mode in CSS only (automatic, no toggle)

by Byte Bunny

Summary:

You may have noticed many websites today support Dark Mode. Dark Mode is the dark color scheme selectable on your mobile device or PC. There are two methods to achieving Dark Mode support on your own website. CSS, and JavaScript.

This tutorial is for CSS only, and does not include a manual toggle for the user to override their system setting.

How to do it:

Implementing Dark Mode in CSS is very easy. Check out our example below.

body {
  background: #fff;
  color: #000;
}

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

For each element we want to be updated when Dark Mode is enabled, create a rule under the @media (prefers-color-scheme: dark) rule.

Conclusion:

This method has it's pros and cons. This will automatically detect Dark Mode and update the elements accordingly; however, some users may prefer to manually change this setting.

See also:

Dark mode in JS and CSS (automatic, with toggle)