css实现深色模式

• 抖音：https://v.douyin.com/hcBMcjj/

• B站：https://www.bilibili.com/video/BV1eq4y1u7Js/

Demo：https://sunzsh.github.io/html-demos/dark_demo.html

代码：https://github.com/sunzsh/st-html-demo/blob/master/dark_demo.html

大家好

上期视频咱们用media查询做了这个

自适应的布局

那今天再给大家分享一个好玩的media

查询

screen and

这里边用一个

这个等于 dark

意思是 当系统设置为深色模式的时候

这里的样式就会生效

比如我们用

body把它的

背景颜色改成这个

然后我们把它的

前景色改成

eee

好我们来看一下什么效果哈

现在是这样的

然后呢我把系统改成深色模式

大家注意看

网页也变了

缩放也没问题

那我们再来看手机上的效果

大家看啊

选择深色模式

手机上也会变

我再选回

浅色模式

打开没有问题

好今天就到这里谢谢大家