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:

Why does this matter?

How to use it

Add this to your CSS:

body { /* Targets the whole website */
  color-scheme: light dark; /* Supports both modes */
}

Options: