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

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

语法

no-preference
表示用户未指定操作系统主题。其作为 布尔值 时以false输出。
light
表示用户的操作系统是浅色主题。
dark
表示用户的操作系统是深色主题。

样例

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

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

规范

规范 状态 注释

Media Queries Level 5
prefers-color-scheme

Editor's Draft Initial definition.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
prefers-color-scheme media feature
Experimental
Chrome Full support 76Edge No support NoFirefox Full support 67IE No support NoOpera No support NoSafari Full support 12.1WebView Android Full support 76Chrome Android Full support 76Firefox Android Full support 67Opera Android No support NoSafari iOS Full support 13Samsung 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.

相关资料

文档标签和贡献者

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