CSS color-scheme property
Have you ever noticed how some websites automatically switch their colors when you use “dark mode” on your phone or computer? The color-scheme CSS property is the magic behind this!
What does color-scheme do?
It’s a hint for browsers. It tells them:
- This website supports light and dark modes: The browser can adapt colors to match the user’s preferences.
- I prefer these colors: Suggests whether the site looks best in a light or dark theme.
Why does this matter?
- Happy Users: Your website looks great automatically, whether someone likes bright screens or prefers darker tones.
- Less Work for You: Saves the need to design separate light and dark versions manually.
How to use it
Add this to your CSS:
body { /* Targets the whole website */
color-scheme: light dark; /* Supports both modes */
}
Options:
- “light dark” : Supports both light and dark modes.
- “light only” : Tells the browser your site is designed for light mode.
- “dark only” : The opposite, for dark mode only designs.