前言
现在好多手机,电脑用户都有设置系统主题色的习惯,一般就是两种,亮色和暗色模式,一般我们正常开发的网站都适用于亮色主题,但是用户切换为暗色模式时,网站主题色就显得格格不入了,这里记录一下css3 是如何实现跟随网站主题色而改变颜色的。
本篇文章的主角就是
prefers-color-scheme
,这个css3的新特性,用于检测用户的操作的系统设置是亮色(light)还是暗色(dark).
废话不多说,直接上代码
一,css监听系统主题色变化
:root表示文档根元素,优先级比较高,而且再这里边定义的变量也可作为全局变量
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
color-scheme: light dark; /* 系统主题一般是亮色和黑色 */
color: #ffffff; /* 默认是黑色主题的颜色 */
background-color: #000000; /* 默认是黑色主题的颜色 */
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
--themeBlue:#007bff;
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
a{
/* :root中设置的变量就可以再全局使用 */
color:var(--themeBlue);
}
/* 亮色模式下的主题色 */
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
}
二,js监听系统主题色变化
<script>
//监听当前系统是什么主题色,可以做一些对应的操作
const prefersColorScheme = window.matchMedia('(prefers-color-scheme: light)');
if (prefersColorScheme.matches) {
console.log('浅色模式');
} else {
console.log('深色模式');
}
</script>
结束语
学会这个,以后就不怕产品说,根据系统主题色改变颜色的需求了。