Prism.JS 实现黑暗模式切换

说明#

Prism 的主题部分和做代码分析的部分，实际上是分开。

从文件上看，能简单理解为:

JS 部分会负责整理识别各语言，整理并将内部的代码进行分类，打上对应的标签。
CSS部分负责染色

既然染色部分是独立的，那么自然也可以实现黑暗模式的颜色切换了。

⚠️使用 AI 得到的糟糕方案#

由于并没有修改 Prism 的经验，所以在询问 GPT 后得到了一个令人_匪夷所思_的答案:

1
<link rel="stylesheet" id="prism-theme" href="path/to/prism-light-theme.css">
2

3
<script>
4
  const darkTheme = 'path/to/prism-dark-theme.css';
5
  const lightTheme = 'path/to/prism-light-theme.css';
6

7
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
8
    // 用户偏好 Dark Mode，使用 Dark 主题
9
    document.getElementById('prism-theme').setAttribute('href', darkTheme);
10
  }
11

12
  // 监听系统主题切换事件
13
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
14
    const theme = event.matches ? darkTheme : lightTheme;
15
    document.getElementById('prism-theme').setAttribute('href', theme);
16
  });
17
</script>

之所以说的上是匪夷所思，是因为这个方案的核心思想，使用不同的 schema，然后监听对应的时间切换，来实现。这个方案看起来实现倒是简单，但是小问题非常多：

每次进行切换的时候，由于时间的延后，以及需要重新加载 CSS，所以代码框的绘制永远是延后的。
这个方案默认是监听prefers-color-schema这个系统事件的，对于一些通过修改 html 属性的手动切换，代码的侵入性实在是过大。

这个方案，在最后不得不废弃。

重写 CSS#

尽管这个说起来十分简单，但是不知道为什么，在网上并没有找到现成可以用的相关代码（可能大家都没兴趣？）

在多方查阅后，某个 Codepen 提供的代码改动给了我一些启发。并完成了如下的内容：

1
/* PrismJS - used for code highlighting */
2

3
[class*="language-"] ::selection {
4
  color: #000;
5
  text-shadow: none;
6
}
7

8
.token.important,
9
.token.bold {
10
  font-weight: bold;
11
}
12
.token.italic {
13
  font-style: italic;
14
}
15
.token.entity {
16
  cursor: help;
17
}
18
.namespace {
19
  opacity: 0.7;
20
}
21

22
/* Default colors (Light mode) */
23
:not(pre) > code[class*="language-"],
24
pre[class*="language-"] {
25
  --color: #33a;
26
  --textShadow: #fff;
27
  --comment: #6e6e6e;
28
  --punctuation: #4e4e4e;
29
  --property: #905;
30
  --operator: #70b;
31
  --selector: #487b00;
32
  --url: #8d6640;
33
  --urlBg: hsla(0, 0%, 100%, .5);
34
  --boolean: #905;
35
  --atrule: #0075a8;
36
  --keyword: #0075a8;
37
  --function: #c93654;
38
  --regex: #860;
39
  --boxShadow: hsla(0,0%,0%,.3);
40
  --prism-background: #f5f2f0;
41

42
}
43

44

45
/* If the OS has dark mode set then... */
46
/* Change dark to light to test */
47

48
@media (prefers-color-scheme: dark) {
49
  html:not([data-theme="light"]) code[class*="language-"]:not([contenteditable]),
50
  html:not([data-theme="light"]) pre[class*="language-"] {
51
    --color: #6ae;
52
    --textShadow: #000;
53
    --comment: #9ab;
54
    --punctuation: #999;
55
    --property: #e70;
56
    --operator: #d7f;
57
    --selector: #8b2;
58
    --url: #cde;
59
    --urlBg: rgba(0,0,0,.5);
60
    --boolean: #a8f;
61
    --atrule: #f00;
62
    --keyword: #f00;
63
    --function: #f55;
64
    --regex: #f91;
65

66
    --boxShadow: #000;
67
    --prism-background: #f5f2f0;
68
  }
69
}
70

71

72
/* Manual switch mode - where implemented */
73
html[data-theme="dark"] code[class*="language-"]:not([contenteditable]),
74
html[data-theme="dark"] pre[class*="language-"] {
75

76
  /* Exactly the same as prefers-color-scheme: dark */
77
  --color: #6ae;
78
  --textShadow: #000;
79
  --comment: #9ab;
80
  --punctuation: #999;
81
  --property: #e70;
82
  --operator: #d7f;
83
  --selector: #8b2;
84
  --url: #cde;
85
  --urlBg: rgba(0,0,0,.5);
86
  --boolean: #8af;
87
  --atrule: #ffb;
88
  --keyword: #fe6;
89
  --function: #f55;
90
  --regex: #f91;
91
  --prism-background: #2a2a2a;
92
  --boxShadow: #000;
93

94
}
95

96
.token.comment,
97
.token.prolog,
98
.token.doctype,
99
.token.cdata {
100
  color: var(--comment);
101
}
102
.token.punctuation {
103
  color: var(--punctuation);
104
}
105
.token.property,
106
.token.symbol,
107
.token.tag,
108
.token.constant,
109
.token.deleted {
110
  color: var(--property);
111
}
112
.token.boolean,
113
.token.number {
114
  color: var(--boolean);
115
}
116
.token.selector,
117
.token.attr-name,
118
.token.string,
119
.token.char,
120
.token.builtin,
121
.token.inserted {
122
  color: var(--selector);
123
}
124
.token.operator {
125
  color: var(--operator);
126
}
127
.token.url,
128
.token.entity,
129
.language-css .token.string,
130
.style .token.string {
131
  color: var(--url);
132
  background-color: var(--urlBg);
133
}
134
.token.atrule,
135
.token.attr-value {
136
  color: var(--atrule);
137
}
138
.token.keyword {
139
  color: var(--keyword);
140
}
141
.token.function {
142
  color: var(--function);
143
}
144
.token.regex,
145
.token.important,
146
.token.variable {
147
  color: var(--regex);
148
}
149
:not(pre) > code {
150
  background: #f5f2f0;
151
  padding: 2px 0;
152
}
153
html[data-theme="dark"] :not(pre) > code {
154
  background-color: #2a2a2a;
155
}
156

157
:not(pre) > code[class*="language-"],
158
pre[class*="language-"] {
159
  background: var(--prism-background);
160
}
161

162

163
@media print {
164
  code[class*="language-"],
165
  pre[class*="language-"] {
166
    text-shadow: none;
167

168
  }
169
}

这段代码主要还是通过声明具体的 class 的颜色为CSS变量来实现的。通过监听html 标签中data-theme属性是否为dark来判断当前使用的主题颜色。

这个方案是本站目前正在使用的方案，相比重新加载 CSS 会有更好的性能和显示效果。