prefers-color-scheme is a CSS media query function that detects whether the user's operating system has dark or light colors set. ① It allows websites to apply different styles according to the user's system preferences without forcing dark mode to be enabled; ② When using it, it must wrap dark styles through @media (prefers-color-scheme: dark) in the style sheet; ③ Define the default style as a fallback scheme; ④ You can combine localStorage to enable users to manually switch themes; ⑤ Modern browsers generally support it, but only rely on system settings and do not respond to ambient light or time changes.

Dark mode has become a common feature across websites and apps, and the prefers-color-scheme media feature is what allows websites to detect whether a user has set their operating system to dark or light mode.

What does prefers-color-scheme do?

This CSS media query lets you apply different styles based on the user's system preference. It doesn't force dark mode — it just gives you a way to respect what the user already choose in their OS settings.

So if someone has their phone or computer set to dark mode, your site can automatically switch to a darker theme without them needing to click a toggle.

How to use prefers-color-scheme in CSS

You can use this media query directly in your stylesheets. The basic idea is to wrap your dark mode styles inside a condition that checks for prefers-color-scheme: dark .

Here's how it looks:

 @media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #e6e6e6;
  }
}

If the user prefers dark mode, those styles will take effect. Otherwise, your default (light mode) styles show up.

A few tips:

• You can also check for prefers-color-scheme: light , but most of the time, you'll only need to handle the dark case.
• Don't forget to define fallback styles outside the media query — not everyone uses a system-level preference.
• Combine it with CSS variables for easier theme management.

Combining with custom themes

Sometimes users might want to override the system setting and choose a theme manually on your site. In that case, prefers-color-scheme isn't enough by itself.

You'd need to:

• Add a toggle button that saves the user's choice (eg, using localStorage)
• Apply the selected theme regardless of the system preference

This way, even if the system says "dark", the user can still pick light mode — which is helpful for people who prefer a different style than their OS setting.

Browser support and limitations

Good news: prefers-color-scheme is supported in all modern browsers — Chrome, Firefox, Safari, Edge, and mobile browsers.

But keep in mind:

• It only works if the user has set a system-wide preference
• It doesn't adapt to ambient light or time of day — just follow OS settings
• Old browsers may ignore it, so always test your fallbacks

Using prefers-color-scheme is a clean and user-friendly way to offer dark mode without forcing choices on visitors. Pair it with manual controls if needed, and you've got a solid setup.

Basically that's it.

The above is the detailed content of What is the prefers-color-scheme media feature for dark mode?. For more information, please follow other related articles on the PHP Chinese website!