自從 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 博客中執行來獲取他的主題色
['--auto-hover-color', '--auto-theme-color', '--auto-banner-bg-color'].forEach(name => console.log(`${name}: ${getComputedStyle(document.documentElement).getPropertyValue(name)} !important;`))
使用獲取到的值來替換下面的第一個 .dark 中的變量
.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 協議開源）。