lena和shane,家庭日志,xulavigne,Lena&Shane

如何实现

让网页自动适配操作系统的暗色(夜间)模式

2020-08-16 Shane Jhu

最近打开 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。



浏览器兼容性:

prefers-color-scheme 浏览器兼容性

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


效果演示:

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


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

如果觉得文章还不错,请点个赞吧

11月 1 2020
让你的孩子每当想到公正和诚实,就会想到你。

小杰克森·布朗 (H. Jackson Brown Jr. 美国作家)