If you want to see an example of
prefers-color-schemein action, here's a CodePen link.
prefers-color-scheme is a CSS media query that detects the current theme preference of the user's operating system.
@media (prefers-color-scheme: dark) {
.element {
background: black;
color: white;
}
}
The prefers-color-scheme media query has two values that you can specify: light and dark. These values allow you to customize the theme of the page with CSS depending on the user's preference.
light: Indicates that the user has notified the system that they prefer a page that has a light theme (dark text on light background).
dark: Indicates that the user has notified the system that they prefer a page that has a dark theme (light text on dark background).
/* Light mode */
@media (prefers-color-scheme: light) {
.element {
background: white;
color: black;
}
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
.element {
background: black;
color: white;
}
}
For the scenario where a user has no preference, you can pass no-preference to add a "default" theme to the page.
Browser Support
At the time of writing this post, browser support for prefers-color-scheme sits at 78% with Edge and Opera Mini along with other mobile browsers not supporting the CSS media query.
Top comments (0)