这篇翻译不完整。请帮忙从英语翻译这篇文章

prefers-color-scheme CSS media feature 用于检测用户的系统主题是浅色或深色。

Syntax

no-preference
表示用户没有指定系统主题。 这个值在 boolean context 中为 false
light
表示用户的系统是使用的是浅色主题。
dark
表示用户的系统是使用的是深色主题。

Examples

这个例子使用了一个有黑色背景和白色文字的元素,当用户使用浅色主题时,会翻转黑白颜色。

HTML

<div class="themed">Theme</div>

CSS

.themed {
  display: block;
  width: 10em;
  height: 10em;
  background: black;
  color: white;
}

@media (prefers-color-scheme: light) {
  .themed {
    background: white;
    color: black;
  }
}

Result

Specifications

Specification Status Comment

Media Queries Level 5
prefers-color-scheme

Editor's Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
prefers-color-scheme media feature
Experimental
Chrome No support NoEdge No support NoFirefox Full support 67IE No support NoOpera No support NoSafari Full support 12.1WebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 67Opera Android No support NoSafari iOS No support NoSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

See also

文档标签和贡献者

此页面的贡献者: SimGenius
最后编辑者: SimGenius,