Origin

Origin

马上订阅 Origin RSS 更新: https://blog.singee.me/atom.xml

强制关闭 xLog 的 Dark Mode

2023年8月2日 06:30

自从 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...
剩余内容已隐藏
查看完整文章以阅读更多
查看完整文章