css3 根据用户操作系统的主题色改变自己网站的颜色

Posted 2023-02-04 郝艳峰Vip

前言

现在好多手机，电脑用户都有设置系统主题色的习惯，一般就是两种，亮色和暗色模式，一般我们正常开发的网站都适用于亮色主题，但是用户切换为暗色模式时，网站主题色就显得格格不入了，这里记录一下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>

结束语

学会这个，以后就不怕产品说，根据系统主题色改变颜色的需求了。