适配深浅主题

适配深浅主题

介绍

MacOS 自 10.14 版本开始深色主题和浅色主题

为了更好的发挥深色主题的作用,苹果要求商店内的应用要支持深色主题,Chrome 73 开始支持 Dark Mode。

语法

前端可以通过 Media Query 查询 prefers-color-scheme 属性来检测用户系统的主题。

1
2
3
@media (prefers-color-scheme: light) {}

@media (prefers-color-scheme: dark) {}

Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
:root {
--background-color: #ededed;
}

section {
--background-color: #fff;
--font-color: #212121;
--highlight-color: #c3423f;
}

// Dark Mode
@media (prefers-color-scheme: dark) {
:root {
--background-color: #111;
}

section {
--background-color: #212121;
--font-color: #fff;
--highlight-color: #50a8d8;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 页面样式
body {
background-color: var(--background-color);
}

section {
max-width: 500px;
margin: 100px auto;
padding: 25px 50px;

color: var(--font-color);
border-radius: 10px;
background-color: var(--background-color);
box-shadow: 0 0 12px 6px rgba(0, 0, 0, 0.05);

.highlight {
color: var(--highlight-color);
}
}

效果如下:

兼容性

IE 及 Edge 12~18 均不支持该特性,其他浏览器更新到最新版本都支持。

切换主题

在 Chrome 中可以通过下面的方式切换 light/dark

  1. 打开控制台

  2. 按住 Control+Shift+PCommand+Shift+P (Mac)

  3. 搜索 show rendering

  4. 设置 Emulate CSS media feature prefers-color-scheme