# 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

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

现在是这样的

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

大家注意看

网页也变了

缩放也没问题

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

大家看啊

选择深色模式

手机上也会变

我再选回

浅色模式

打开没有问题

好今天就到这里谢谢大家


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sunzsh.gitbook.io/xiaoshan.bug/css-shi-xian-shen-se-mo-shi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.