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.