prefers-color-scheme怎么设置检测系统主题色

这篇“prefers-color-scheme怎么设置检测系统主题色”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“prefers-color-scheme怎么设置检测系统主题色”文章吧。

设置主题色

在 CSS 中，提供了一种设置系统主题色的媒体特性 prefers-color-scheme，该特性通常提供两个值 light 和 dark。顾名思义，这两个值一个代表 日间模式，一个表示 夜间模式。并且他们的兼容性也是最好的。

这里有一个简单的例子，可以很方便的通过 CSS 实现系统主题色：

.day{background:#eee;color:black;}.night{background:#333;color:white;}@media(prefers-color-scheme:dark){.day.dark-scheme{background:#333;color:white;}.night.dark-scheme{background:black;color:#ddd;}}@media(prefers-color-scheme:light){.day.light-scheme{background:white;color:#555;}.night.light-scheme{background:#eee;color:black;}}

当系统主题为日间模式时，会应用上面的 light 主题样式；当系统主题为夜间模式时，会应用上面的 dark 主题样式。

实际开发中，我们会将项目用到的色值抽离出来作为全局的公共变量，方便我们对项目整体的色值管理。如：

:root{//LightTheme--PrimaryBackgroundColorLight:#f9f9f9;--PageBackgroundColorLight:#efefef;--PrimaryColorLight:#34495e;--PrimaryActivedColorLight:#1890FF;//DarkTheme--PrimaryBackgroundColorDark:#293042;--PageBackgroundColorDark:#202634;--PrimaryColorDark:#c6cfd8;--PrimaryActivedColorDark:#1890FF;}

我们定义好全局 CSS 变量后，在需要的地方直接引用即可：

.day.light{background-color:var(--PrimaryBackgroundColorLight);}

检测主题色

既然能通过 CSS 设置系统主题色，那 JS 肯定也有能力来检测系统主题色。JS 提供了一个用于检查媒体查询的函数 matchMedia，利用该函数能方便地检查当前系统主题色：

constthemeMedia=window.matchMedia("(prefers-color-scheme:light)");if(themeMedia.matches){//日间模式}else{//夜间模式}

监听主题色变化

除了获取当前系统主题色，我们还能监听主题色的变化。

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

通过上面提到的三个知识点，在自己站点实现主题色功能是绰绰有余的。像一些更丰富的多主题切换，虽然实现的方法不同，但思路基本都是类似的。总结起来就是开篇的三句话：如何设置主题、获取当前被应用的主题以及监听主题的变更。

以上就是关于“prefers-color-scheme怎么设置检测系统主题色”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注主机评测网行业资讯频道。

上一篇：idea乱码修改bin目录下idea.exe.vmoptions无效怎么解决

下一篇：Python?Flask怎么实现后台任务轻松构建高效API应用

---