### 彪哥

爱好前端

- HTML

- CSS

  - CSS教程和技巧收藏
  - flex布局语法
  - flex布局案例-基础
  - flex布局案例-骰子
  - flex布局案例-圣杯布局
  - flex布局案例-网格布局
  - flex布局案例-输入框布局
  - CSS3之transition过渡
  - CSS3之animation动画
  - 「布局技巧」图片未加载前自动撑开元素高度
  - 文字在一行或多行时超出显示省略号
  - 从box-sizing属性入手，了解盒子模型
  - 水平垂直居中的几种方式-案例
  - 如何根据系统主题自动响应CSS深色模式
    - CSS 深色模式 (Dark Mode)
    - 添加深色模式自动响应
    - JS判断深色模式
    - 结论
  - 「css技巧」使用hover和attr()定制悬浮提示
  - CSS-function汇总
  - CSS给table的tbody添加滚动条

- 页面
- CSS

heBody
2020-03-31
目录

# 如何根据系统主题自动响应CSS深色模式

# # 如何根据系统主题自动响应CSS深色模式

很多人喜欢选择APP或网站中的深色模式，也许他们更喜欢这样的外观，或者他们想让自己的眼睛免受疲劳。这篇文章将告诉你如何在网站中实现一个自动的CSS深色模式，根据访客的系统主题来自动响应。

## # CSS 深色模式 (Dark Mode)

在`:root`根元素中定义变量来设置主题的颜色。我建议你也这样做，因为这样会使这个过程容易得多。我定义的变量如下:

    :root {
      --bg: #fff;
      --textColor: #004050;
      --borderColor: rgba(0,0,0,.15);
    }

1
2
3
4
5

> `:root` 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，`:root` 表示 `<html>`元素，除了优先级更高之外，与 `html` 选择器相同。

如果希望在样式表中使用这些变量，可以这样做

    body {
      color: var(--bg);
    }

1
2
3

这样，如果你想改变你的主题颜色，所需要做的就是修改你定义的变量，所有使用这个变量的样式都会被更新。

现在我们需要定义一组新的变量，这些变量将在调用CSS深色模式时使用。对我来说，深色模式的变量是这样的:

    /* 定义深色模式的颜色 */
    :root {
      --bg: rgb(30,30,34);
      --textColor: rgb(150,150,154);
      --borderColor: #2C2C3A;
    }

1
2
3
4
5
6

## # 添加深色模式自动响应

现在我们定义了两组变量。剩下要做的一件事就是将`prefers-color-scheme`媒体查询添加到我们的深色模式变量中。

使用您的深色模式变量并在外层添加`@media`查询

    /* 根据系统的深色模式响应深色变量 */
    @media (prefers-color-scheme: dark) {
      :root {
        --bg: rgb(30,30,34);
        --textColor: rgb(150,150,154);
        --borderColor: #2C2C3A;
      }
    }

1
2
3
4
5
6
7
8

> `prefers-color-scheme`文档
> (opens new window)

这是真的! 如果有人正在使用一个深色模式的系统主题，并访问你的网站，将自动切换到深色模式。

> 如果你的电脑系统不支持深色模式，可以使用手机测试，先把手机的系统主题调到深色模式，再打开你的网站。

## # JS判断深色模式

如果你的需求需要js来判断系统是否处于深色模式，可以这样做：

    if(window.matchMedia('(prefers-color-scheme: dark)').matches){
      //深色主题
    }

1
2
3

> `matchMedia`
> (opens new window)方法返回一个`MediaQueryList`
> (opens new window)对象，该对象具有属性`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)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

## # 结论

我们不仅可以在布局方面响应不同尺寸屏幕，还可以按系统主题响应深色模式。我相信你的深夜访客，或者那些喜欢深色模式的人，会感谢你的。

编辑
(opens new window)
#css
上次更新: 2022/12/14, 19:36:42
水平垂直居中的几种方式-案例
「css技巧」使用hover和attr()定制悬浮提示

← 水平垂直居中的几种方式-案例 「css技巧」使用hover和attr()定制悬浮提示→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式