darkmode-in-css.org

Darkmode in CSS

You can use the following @media query to detect system dark mode in CSS. In this example we use a dark background for dark mode:

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

I personally like to combine this with CSS Custom Properties to make the switch as seamless as possible.

Note that as of the writing of this post Internet Explorer (and some other minor browsers) did not support this query. Check yourself: Can I use prefers-color-scheme media query.