CSS 深色模式 (Dark Mode)

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

1
2
3
4
5
:root {
  --bg: #fff;
  --textColor: #004050;
  --borderColor: rgba(0, 0, 0, 0.15);
}

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

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

1
2
3
body {
  color: var(--bg);
}

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

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

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

添加深色模式自动响应

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

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

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

prefers-color-scheme文档

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

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

JS 判断深色模式

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

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

matchMedia方法返回一个MediaQueryList对象，该对象具有属性matches、media，具有方法addListener、removeListener。

addListener接收一个MediaQueryList对象作为参数。
为深色模式添加监听器，以响应系统切换到或切换出深色模式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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);

结论

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