Mac Dark Mode media queries

CSS

CSS TIP: Mac Dark Mode media queries.

Explanation

  • @media (prefers-color-scheme: dark): This media query applies styles when the user has set their system to dark mode.

Usage

To implement dark mode styles, use the following CSS:

/* Default Light Mode */
body {
  color: #333;
  background-color: #fff;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  body {
    color: #fff;
    background-color: #333;
  }
}