3 min read
•Question 45 of 49easyWhat is color-scheme in CSS?
Understanding light and dark mode support.
What You'll Learn
- color-scheme property
- System preference support
- Implementation
The Property
styles.cssCSS
:root {
color-scheme: light dark;
}What it Does
- Tells browser supported color schemes
- Affects form controls, scrollbars
- Works with prefers-color-scheme
Implementation
styles.cssCSS
/* Support both themes */
:root {
color-scheme: light dark;
}
/* Light theme (default) */
:root {
--bg: white;
--text: black;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a1a;
--text: white;
}
}
body {
background: var(--bg);
color: var(--text);
}