网页外观主题色-如何监听系统appearance主题色的改变

声明：作者声明此文章为原创，未经作者同意，请勿转载，若转载，务必注明本站出处，本平台保留追究侵权法律责任的权利。

全栈老韩

全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。

自从Apple公司推出系统外观深色、浅色主题色的切换后，大多数的pc、mobile的app也都支持主题色的修改，进而发展到浏览器的主题色也可以进行修改，网页也就可以随着主题色颜色的切换变得更加丰富。

那么我们怎么在js中监听系统主题色的改变呢？

js 复制代码

const listenForColorSchemeChanges = () => {
	  darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
	  darkModeMediaQuery.addEventListener('change', event => {
	        if (event.matches) {
	           console.log("Switched to dark mode (black style).");
	        } else {
	           console.log("Switched to light mode (white style).");
	        }
	  });
}

发布于2024-08-18 09:04:47

浏览量383·

暂无评论，快来发表第一条评论吧