prefers-color-scheme 是一種CSS 媒體查詢(xún)功能，用於檢測(cè)用戶(hù)操作系統(tǒng)是否設(shè)置了深色或淺色模式。 ① 它允許網(wǎng)站根據(jù)用戶(hù)的系統(tǒng)偏好應(yīng)用不同的樣式，而不會(huì)強(qiáng)制啟用深色模式；② 使用時(shí)需在樣式表中通過(guò)@media (prefers-color-scheme: dark) 包裹深色樣式；③ 需定義默認(rèn)樣式作為回退方案；④ 可結(jié)合localStorage 實(shí)現(xiàn)用戶(hù)手動(dòng)切換主題；⑤ 現(xiàn)代瀏覽器普遍支持，但僅依賴(lài)系統(tǒng)設(shè)置，不響應(yīng)環(huán)境光或時(shí)間變化。

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 chose 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 follows OS settings
• Older 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.

基本上就這些。

以上是暗模式的彩色彩色媒體功能是什麼？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！