自从 xLog 引入了 Dark Mode 以后，因为大大降低了对比度造成文字灰色可读性差，我就暂停使用了 xLog （同时暂停了写作和阅读）而期待官方更新。然而，数月过去了，依然没有丝毫改善（难道开发团队都没人用 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 协议开源）。
