DEV Community

Discussion on: Dark Mode with CSS Variable

View post
Collapse
 
pbnj profile image
Peter Benjamin (they/them) •

Nice.

Additionally, one can toggle based on the users' system/OS theme using the prefers-color-scheme media queries.

Example:

/* Light mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: black;
    }
}
Enter fullscreen mode Exit fullscreen mode 
/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}
Enter fullscreen mode Exit fullscreen mode

For more info, see the spec: drafts.csswg.org/mediaqueries-5/#p...