本文首发于 xlog,可跳转获得更佳阅读体验

自从 xLog 引入了 Dark Mode 以后,因为大大降低了对比度造成文字灰色可读性差,我就暂停使用了 xLog (同时暂停了写作和阅读)而期待官方更新。然而,数月过去了,依然没有丝毫改善(难道开发团队都没人用 Dark Mode 吗)…… 行吧,自己动手,丰衣足食🌚

关闭自己博客的 Dark Mode

因为 xLog 不支持自定义 js,故无法直接修改 xLog 的 Dark Mode 判断逻辑。因此,只能强行将 Dark Mode 模式下的 CSS 覆盖成 Light Mode 的。

警告
使用该功能意味着需要时刻跟随 xLog 的官方样式更新,否则会造成博客效果变差。如果使用请自行承担相关风险。
下面的 CSS 尽可能覆盖了所有 Dark Mode 下的样式,并隐藏了 Theme Switcher(可查看当前站点来预览效果)。
另外,因为 xLog 使用了 Service Worker,修改站点样式后可能需要刷新两次才能预览到最新效果。

附:CSS

首先打开你的博客页面,切换成 Light Mode,然后在浏览器控制台执行下面的脚本来获取你的主题色

当然,你也可以从其他人的 xLog 博客中执行来获取他的主题色

1
['--auto-hover-color', '--auto-theme-color', '--auto-banner-bg-color'].forEach(name => console.log(`${name}: ${getComputedStyle(document.documentElement).getPropertyValue(name)} !important;`))

使用获取到的值来替换下面的第一个 .dark 中的变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
.dark { /* 将下面的三个变量值替换 */
--auto-hover-color: #e9e7e8 !important;
--auto-theme-color: #bd80bd !important;
--auto-banner-bg-color: #d3cfd2 !important;
}

.dark .xlog-banner {
background-color: var(--banner-bg-color, #f9f9f9) !important;
}

html.dark {
--border-color: #eee !important;
color-scheme: light !important;
}

:root {
--csb-ck-color-text: 46,46,46 !important;
--csb-ck-color-text2: 17,17,17 !important;
--csb-ck-color-text-subtle: 153,153,153 !important;
--csb-ck-color-bg: 255,255,255 !important;
--csb-ck-color-bg1: 247,247,247 !important;
}

:root {
--tw-color-black: 0 0 0 !important;
--tw-color-white: 255 255 255 !important;
--tw-color-slate-50: 248 250 252 !important;
--tw-color-slate-100: 241 245 249 !important;
--tw-color-slate-200: 226 232 240 !important;
--tw-color-gray-50: 249 250 251 !important;
--tw-color-gray-100: 243 244 246 !important;
--tw-color-gray-200: 229 231 235 !important;
--tw-color-gray-300: 209 213 219 !important;
--tw-color-gray-400: 156 163 175 !important;
--tw-color-gray-500: 107 114 128 !important;
--tw-color-gray-600: 75 85 99 !important;
--tw-color-gray-700: 55 65 81 !important;
--tw-color-gray-800: 31 41 55 !important;
--tw-color-gray-900: 17 24 39 !important;
--tw-color-zinc-50: 250 250 250 !important;
--tw-color-zinc-100: 244 244 245 !important;
--tw-color-zinc-200: 228 228 231 !important;
--tw-color-zinc-300: 212 212 216 !important;
--tw-color-zinc-400: 161 161 170 !important;
--tw-color-zinc-500: 113 113 122 !important;
--tw-color-zinc-600: 82 82 91 !important;
--tw-color-zinc-700: 63 63 70 !important;
--tw-color-zinc-800: 39 39 42 !important;
--tw-color-zinc-900: 24 24 27 !important;
--tw-color-stone-400: 168 162 158 !important;
--tw-color-red-100: 254 226 226 !important;
--tw-color-red-200: 254 202 202 !important;
--tw-color-red-400: 248 113 113 !important;
--tw-color-red-500: 239 68 68 !important;
--tw-color-red-600: 220 38 38 !important;
--tw-color-red-700: 185 28 28 !important;
--tw-color-orange-50: 255 247 237 !important;
--tw-color-orange-100: 255 237 213 !important;
--tw-color-orange-200: 254 215 170 !important;
--tw-color-orange-400: 251 146 60 !important;
--tw-color-orange-500: 249 115 22 !important;
--tw-color-orange-600: 234 88 12 !important;
--tw-color-orange-700: 194 65 12 !important;
--tw-color-yellow-200: 254 240 138 !important;
--tw-color-yellow-400: 250 204 21 !important;
--tw-color-yellow-500: 234 179 8 !important;
--tw-color-green-100: 220 252 231 !important;
--tw-color-green-200: 187 247 208 !important;
--tw-color-green-400: 74 222 128 !important;
--tw-color-green-500: 34 197 94 !important;
--tw-color-green-600: 22 163 74 !important;
--tw-color-green-700: 21 128 61 !important;
--tw-color-teal-600: 13 148 136 !important;
--tw-color-sky-500: 14 165 233 !important;
--tw-color-sky-700: 3 105 161 !important;
}

footer>div>button[role=switch] {
display: none !important;
}

关闭他人博客的 Dark Mode

因为 xLog 支持自定义域名,而暗色模式的 Theme Switcher 仅在当前域名上生效,因此无法简单地为所有站点关闭 Dark Mode。只能…… 写一个脚本检测到是 xLog 后强制关闭深色模式。

脚本:https://greasyfork.org/zh-CN/scripts/472216-auto-disable-xlog-dark-mode 可自由取用(以 MIT 协议开源)。