html实现深色模式切换
20NN年,苹果第提出了深色模式,在此之前网页都是单一的颜色,长时间在盯着屏幕也会造成视觉疲劳,Dark Mode的提出,最开始适配的
Dark Mode。
纯css实现逻辑
prefers-color-scheme CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。
参数说明
-
no-preference表示系统未得知用户在这方面的选项。在布尔值上下文中，其执行结果为
false。 -
light表示用户已告知系统他们选择使用浅色主题的界面。
-
dark表示用户已告知系统他们选择使用暗色主题的界面。
/* 根据系统的深色模式响应深色变量 */
@media (prefers-color-scheme: dark) {
:root {
--bg: #ffff;
--textColor: #282c34;
--borderColor: #2c2c3a;
}
}
@media (prefers-color-scheme: light) {
:root {
--bg: #282c34;
--textColor: #efefef;
--borderColor: #2c2c3a;
}
}
现在可以拿起你的手机，打开深色模式进行查看效果。
结论:
可以设置两套全局变量,针对暗色一套,针对明亮一套.
局限性
在某些设备上,不支持媒体查询,这些是无法生效的，
示例代码
js实现切换模式
如果你的需求需要 js 来判断系统是否处于深色模式，可以这样做：
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
//深色主题
}
matchMedia方法返回一个MediaQueryList对象，该对象具有属性matches、media，具有方法addListener、removeListener。
addListener接收一个MediaQueryList对象作为参数。 为深色模式添加监听器，以响应系统切换到或切换出深色模式：
let listeners = {
dark: (mediaQueryList) => {
if (mediaQueryList.matches) {
alert("您切换到深色模式了！");
}
},
light: (mediaQueryList) => {
if (mediaQueryList.matches) {
alert("您切换到浅色模式了！");
}
},
};
window.matchMedia("(prefers-color-scheme: dark)").addListener(listeners.dark);
window.matchMedia("(prefers-color-scheme: light)").addListener(listeners.light);
