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

最近，根据系统主题设置网页主题的场景越来越多。国内常用的方法是基于CSS媒体查询。 CSS媒体查询无法根据用户喜好自定义主题，因此本文涵盖CSS和JS两种场景。

使用媒体查询的CSS

可以使用CSS中的preference-color-scheme媒体属性。

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

获取系统主题

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

    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')
        }
    });