自从 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 协议开源)。