跟一波风，网页的深色模式

什么叫易 · 发表于 2020-3-31 01:13:44

macOs在去年更新了DarkMode(暗黑模式)
紧跟着Chrome,FireFox都在去年支持了DarkMode模式，其实除了IE,其余的新版本浏览器都是支持的
WIN10也是支持浅色深色颜色主题的,浏览器对它只不过并不是很友好。
随着暗黑模式的出现，safari添加了一条媒体cha询 prefers-color-scheme
https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-color-scheme
默认情况下都是浅色模式，所以大多数情况都只需要添加暗黑模式的媒体cha询
当然大量的更改颜色最好用到CSS3的变量，所以移动端开发更好，不需要考虑兼容问题。
CSS方面：@media(prefers-color-scheme:drak){...}
@media(prefers-color-scheme:light){...}
即可更换,在切换时也会自动更换，主要说一说JS代码。
通过 window.matchMedia("(prefers-color-scheme:dark)")
该方法会返回一个对象

MediaQueryList
- media: "(prefers-color-scheme: dark)"
- matches: false
- onchange: null

结构如上：
media属性表示当前cha询的媒体属性
matches属性表示如果当前文档与当前媒体所匹配则返回true,反之false.返回false就可以认为时浅色模式，除非颜色模式更新
onchange事件发生在用户手动切换颜色主题时
style.setProperty(key,value)
用于设置css变量
有了以上知识点，就可以进行设置网页的颜色模式了，大多数博客网站都支持该模式切换。

例子源码：

auto.7z (5.21 KB, 下载次数: 9)

duanyijun · 发表于 2022-4-12 11:41:19

好东西。厉害厉害

小黑阳子 · 发表于 2020-4-13 11:37:27

新人，学习一下。

geegtb · 发表于 2020-4-8 09:39:38

好东西，要好好看看

什么叫易 · 发表于 2020-3-31 01:23:35

Win10的颜色主题也没更新多久，应该是存储在zc表当中，我就不去找，各位有能力也可以编写个功能关于颜色主题的

		自动登录	找回密码
密码			注册

[技术专题] 跟一波风，网页的深色模式