prefers-color-scheme (Dark Mode Support)

In this lesson you'll learn the basics of dark-mode support using prefers-color-scheme, so you can offer a design matched to the user's own setting. This is for people searching "CSS dark mode support."

Using @media (prefers-color-scheme: dark) lets you write styles that only apply when the user's OS or browser setting is "dark mode." This is the first step toward making your own site support dark mode.

The sample code specifies a white-background, black-text style for the normal case, and a dark-background, light-text style inside @media (prefers-color-scheme: dark). Try switching your device's setting and experience how the color scheme automatically changes.

A common beginner stumbling block is overwriting individual properties one at a time without combining this with CSS variables, which makes the code grow long. In real projects, the standard technique is to combine this with CSS variables (custom properties), managing the color switch from one central place.

More and more users prefer dark mode for nighttime browsing or to save battery. This very Prodou site uses this same mechanism to switch between light and dark, so it's knowledge that's genuinely useful for running a real site too.