最近打开 https://docs.microsoft.com/，发现页面整体都是暗色主题，而印象中不久之前还都是白底黑字。

于是简单查了一下，发现目前的大部分主流浏览器（Chrome、Firefox、Edge..）已经开始支持通过使用 prefers-color-scheme CSS 媒体特性来检测用户是否将操作系统的主题色设置为亮色或者暗色。

使用这种方式，在更改操作系统主题（或更改Win10中的新Edge默认主题）时，页面样式实时生效，无需刷新。（Microsoft Docs 则需要刷新页面才可生效，使用的也许不是这种方式，此处不做深究）。

关键代码：

通过CSS@media设置相应主题的样式，在受支持的浏览器和操作系统中将会根据环境选择相应的样式。

@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        color: #e3e3e3;
    }
    div {
        border-color: #353535;
    }
}
@media (prefers-color-scheme: light) {
    body {
        background-color: #F1F1F1;
        color: #333333;
    }
    div {
        border-color: #a1a1a1;
    }
}

语法：（摘自 developer.mozilla.org）

no-preference

    表示系统未得知用户在这方面的选项。在布尔值上下文中，其执行结果为 false。

light

    表示用户已告知系统他们选择使用浅色主题的界面。

dark

    表示用户已告知系统他们选择使用暗色主题的界面。

译者注：“未得知”、“已告知”等用语，英文原文如此。

“未得知”可理解为：浏览器的宿主系统不支持设置主题色，或者支持主题色并默认为/被设为了未设置/无偏好。

“已告知”为：浏览器的宿主系统支持设置主题色，且被设置为了亮色或者暗色。

目前，若结果为 no-preference，无法通过此媒体特性获知宿主系统是否支持设置主题色，或者用户是否主动将其设置为无偏好。出于隐私保护等方面的考虑，用户或用户代理也可能在一些情况下在浏览器内部将其设置为 no-preference。

浏览器兼容性：

△ 截至2020年8月，developer.mozilla.org 中报告的兼容性说明

效果演示：

在Chrome、Firefox中打开本页，切换Win10操作系统主题色；或在Edge中切换浏览器主题色查看效果。

本文由lenashane.com原创，转载请注明出处：查看原文