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;
}
}