思路#

首先一般有个按钮可以切换当前的主题，主题有三个状态：黑暗、浅色、跟随系统。

如何检测系统的主题？使用这个方法：

1
window.matchMedia('(prefers-color-scheme: dark)').matches)

返回值为true即为黑暗模式，false即为浅色模式。

然后就是如何读取主题了，这里我使用的是localStorage，在localStorage里存储一个theme的值，然后在页面加载时检测这个值，如果有值就使用这个值，如果没有就使用系统的主题。

如何切换主题？这里我使用的是document.documentElement.classList，在<html>标签上添加dark类。

有两种方法可以区分颜色：

在:root和 :root.dark里定义颜色变量，然后在CSS里使用var(--<variable-name>)来使用变量。
或者在CSS里使用<selector>.dark来选择黑暗模式下的样式。

推荐使用第一种方法，因为第二种方法会导致CSS文件变得很大，而且不利于维护。

主要部分代码实现#

在主题的main.js中：

初始时，检测localStorage里是否有theme的值，如果有就使用这个值，如果没有就把theme设置为auto。

1
data(){
2
  return {
3
    theme: localStorage.getItem("theme") || "auto",
4
  }
5
}

在页面加载时，检测theme，如果为auto则检测系统的主题并设置颜色，不是则直接设置颜色。在beforeunload事件里，如果theme为auto则移除localStorage里的theme，否则就设置localStorage里的theme为当前的theme。

1
created() {
2
  if (this.theme === 'auto')
3
    this.isSystemDarkMode() ? this.setDarkMode(true) : this.setDarkMode(false);
4
  else
5
    this.theme === "dark" ? this.setDarkMode(true) : this.setDarkMode(false);
6
  window.addEventListener("beforeunload", () => {
7
    if (this.theme === "auto")
8
      localStorage.removeItem("theme");
9
    else
10
      localStorage.setItem("theme", this.theme)
11
  });
12
},

判断系统是否为黑暗模式、设置颜色、切换主题的方法：

1
methods: {
2
        // 判断系统是否为黑暗模式
3
        isSystemDarkMode() {
4
            return window.matchMedia("(prefers-color-scheme: dark)").matches;
5
        },
6
        /**
7
         * @param {boolean} dark
8
         */
9
        setDarkMode(dark) {
10
            if (dark) {
11
                document.documentElement.classList.add("dark");
12
                document
13
                .getElementById("highlight-style-dark")
14
                .removeAttribute("disabled");
15
            } else {
16
                document.documentElement.classList.remove("dark");
17
                document
18
                .getElementById("highlight-style-dark")
19
                .setAttribute("disabled", "");
20
            }
21
        },
22
        // 点击按钮切换主题
23
        handleThemeSwitch() {
24
            this.theme = ((theme) => {
25
                switch (theme) {
26
                case "auto": // auto -> light
27
                    this.setDarkMode(false);
28
                    return "light";
29
                case "light": // light -> dark
30
                    this.setDarkMode(true)
31
                    return "dark";
32
                case "dark": // dark -> auto
33
                    this.isSystemDarkMode() ? this.setDarkMode(true) : this.setDarkMode(false);
34
                    return "auto";
35
            }})(this.theme)
36
        },
37
    },

适配第三方组件#

页面上有一些引入的第三方组件，比如说评论组件，HighLightJS这些组件的样式是在组件内部写死的，所以我们需要在组件加载时检测主题并设置颜色。

Waline#

Waline是一个基于Vercel Serverless的评论系统，它的文档里有提到如何适配黑暗模式。我们是在html下加上dark类，所以只需要在配置里写上我们的适配方法即可：

1
// comments.ejs
2
Waline.init({
3
  //.....
4
  dark: "html.dark",
5
})

这样Waline就会检测html标签是否有dark类，如果有就使用黑暗模式，没有就使用浅色模式。就适配完成了。

HighLightJS#

HighLightJS的样式文件本身就是通过<link>引入的，官网上也提供了许多不同的主题，我们可以导入浅色和深色两套主题，在浅色时disabled深色那套，深色时取消disabled即可。

1
# 给出两套主题
2
highlight:
3
    enable: true
4
    style: github
5
    styleDark: github-dark

然后引入两套主题：(这里是import.ejs)

1
<% if (theme.highlight.enable) { %>
2
<script src="https://cdn.staticfile.org/highlight.js/11.8.0/highlight.min.js"></script>
3
<script src="https://cdn.staticfile.org/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
4
<link
5
    rel="stylesheet"
6
    href="https://cdn.staticfile.org/highlight.js/11.8.0/styles/<%- theme.highlight.style %>.min.css"
7
/>
8
<link
9
    rel="stylesheet"
10
    id="highlight-style-dark"
11
    disabled
12
    href="https://cdn.staticfile.org/highlight.js/11.8.0/styles/<%- theme.highlight.styleDark %>.min.css"
13
/>
14
<script src="<%- url_for("/js/lib/highlight.js") %>"></script>
15
<% } %>

然后在切换颜色时切换disabled属性即可：

1
setDarkMode(dark) {
2
    if (dark) {
3
        document.documentElement.classList.add("dark");
4
        document
5
        .getElementById("highlight-style-dark")
6
        .removeAttribute("disabled");
7
    } else {
8
        document.documentElement.classList.remove("dark");
9
        document
10
        .getElementById("highlight-style-dark")
11
        .setAttribute("disabled", "");
12
    }
13
},

白屏闪屏问题#

我在自己的本地测试完成后，满心欢喜地推送到了GitHub，然后打开线上的博客，发现了一个问题：点击刷新后，背景变成白色立马变成黑色，几次都是如此，十分影响观感。

观察页面源代码可知，负责切换主题的逻辑main.js是在body中，在本地调试时，请求非常迅速，main.js能够立即被请求到并执行，而线上有延迟，加载完head后可能要过好一会才能拿到main.js，再执行，所以会出现先白色背景后闪回深色的问题。

解决方式就是把这一块单独放进head里执行。 (在layout.ejs中，略去了其它部分：)

1
<head>
2
  <script>
3
    if (localStorage.getItem('theme') === "dark" ||
4
      (!("theme" in localStorage) &&
5
        window.matchMedia("(prefers-color-scheme: dark)").matches)
6
    ) {
7
        document.documentElement.classList.add("dark");
8
    }
9
  </script>
10
</head>