CSS media feature: prefers-color-scheme
December 03, 2023
The
prefers-color-schemeCSS media feature is used to detect if a user has requested light or dark color themes. A user indicates their preference through an operating system setting (e.g. light or dark mode) or a user agent setting.
Example
:root {
--background-color-light: #ffffff;
--background-color-dark: #2d2d2d;
--text-color-light: #333333;
--text-color-dark: #ffffff;
}
/* Light mode styles */
body {
background-color: var(--background-color-light);
color: var(--text-color-light);
}
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
body {
background-color: var(--background-color-dark);
color: var(--text-color-dark);
}
}Reference
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme