Github 是如何做到同步系统主题颜色的？

前端黑板报

发布于 2022-12-01 17:20:38

7140

发布于 2022-12-01 17:20:38

文章被收录于专栏：前端黑板报

今天逛 github 发现出了一个新功能：

image.png

动态效果：

image.png

可以更改主题模式了，其实更改主题模式也不是什么新鲜功能，有很多网站都有：

image.png

image.png

image.png

image.png

可以看到实现的方式基本就是在浏览器本地存一个数据来标识当前处于什么模式，当然 github 也没有例外：

image.png

那难道本文就完了？

当然没有，这次要讲的是同步系统的主题模式，有没有发现第一张图的下拉框内有一个选项：Sync with system：

image.png

它这里就是同步系统主题的地方，先看下动态效果：

image.png

那它是如何实现的呢？起初我以为是通过 JavaScript 检测一个事件来实现的，进过搜索：

image.png

通过上面两篇文章得知，是使用 @media 的一个属性 prefers-color-scheme 来实现的：

@media (prefers-color-scheme: dark) { //... } 
@media (prefers-color-scheme: light) { //... }

我们看一个简单的例子：

// style 
<style> 
@media (prefers-color-scheme: dark) { 
    body { background-color: black; color:white; } 
} 
@media (prefers-color-scheme: light) { 
    body { background-color: white; color:black; } 
} 
</style>

// html 
<body> 测试 prefers-color-scheme 属性 </body>

效果如下：

image.png

那它的兼容性如何？

image.png

image.png

浏览器使用百分比上看全球数据已经90.08%可以支持，但是在中国只有52.46%。但是也不影响使用，只要做好兼容就行。

那我们前面提到的 JavaScript 能检测到吗？浏览器虽然没有直接提供类似：

window.addEventListener('theme-mode', event =>{ 
    if(event.mode == 'dark'){
    
    }else if(event.mode == 'light'){
    
    } 
})

但是我们可以通过另一个途径来实现检测主题的变化：

window.matchMedia('(prefers-color-scheme: dark)') .addEventListener('change', event => { 
    if (event.matches) { 
        //dark mode 
    } else { 
        //light mode 
    } 
})

首先：mqList = window.matchMedia(mediaQueryString) 会返回一个 MediaQueryList 对象，可以通过监听它的 change 事件来得到 matches 属性。matches 为 true 就代表匹配当前的 media，反之则没有。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-08-28，如有侵权请联系 cloudcommunity@tencent.com 删除

github