CSS、JS中检测系统主题动态设置样式

近来来根据系统主题确定网页主题的场景越来越多了，国内常用的方式是基于CSS媒体查询的，CSS媒体查询不能根据用户喜好来自定义主题，所以本篇文章收纳了CSS和JS两种场景。

CSS利用媒体查询

在CSS中可以使用利用媒体属性 preferred-color-scheme。

    @media (prefers-color-scheme: light) {
      body {
        background: #fff;
        color: #333;
      }
    }
    @media (prefers-color-scheme: dark) {
      body {
        background: #333;
        color: #fff;
      }
    }
 

Javascript检测系统主题

获取系统主题

获取JavaScript中的浅色或深色主题，使用matchMedia函数检查是否已满足CSS媒体查询。
通过结果的matches判断当前主题是否正确

    const themeMedia = window.matchMedia("(prefers-color-scheme: light)");
    if (themeMedia.matches) {
        console.log('light')
    } else {
        console.log('dark')
    }
 

监听主题变化

上述方法仅能获取一次主题，若用户切换主题时，页面是无法实时更换主题的。
幸运的是，上述的媒体查询结果(MediaQueryList)对象支持addListener方法监听主题变化。
通过监听就可以解决主题切换实时更新的额问题了。

    const themeMedia = window.matchMedia("(prefers-color-scheme: light)");
    themeMedia.addListener(e => {
        if (e.matches) {
            console.log('light')
        } else {
            console.log('dark')
        }
    });