自从 xLog 引入了 Dark Mode 以后，因为大大降低了对比度造成文字灰色可读性差，我就暂停使用了 xLog （同时暂停了写作和阅读）而期待官方更新。然而，数月过去了，依然没有丝毫改善（难道开发团队都没人用 Dark Mode 吗）…… 行吧，自己动手，丰衣足食🌚
閉じる自分のブログのダークモード#
xLog はカスタム js をサポートしていないため、xLog のダークモードの判定ロジックを直接変更することはできません。したがって、ダークモードの CSS を強制的にライトモードに上書きするしかありません。
警告
この機能を使用すると、常に xLog の公式スタイルの更新に追従する必要があります。そうしないと、ブログの効果が悪化する可能性があります。使用する場合は、関連するリスクを自己負担してください。
以下の CSS は、ダークモードのすべてのスタイルをカバーし、テーマスイッチャーを非表示にします（現在のサイトをプレビューするために表示できます）。
また、xLog は Service Worker を使用しているため、サイトのスタイルを変更した後、最新の効果をプレビューするには 2 回リフレッシュする必要がある場合があります。
付：CSS
まず、ブログページを開き、ライトモードに切り替え、次のスクリプトをブラウザのコンソールで実行してテーマカラーを取得します。
もちろん、他の人の xLog ブログから実行して彼のテーマカラーを取得することもできます。
['--auto-hover-color', '--auto-theme-color', '--auto-banner-bg-color'].forEach(name => console.log(`${name}: ${getComputedStyle(document.documentElement).getPropertyValue(name)} !important;`))
取得した値を、最初の.dark内の変数に置き換えてください。
.dark { /* 以下の3つの変数の値を置き換える */
--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;
}
他の人のブログのダークモードを閉じる#
xLog はカスタムドメインをサポートしているため、ダークモードのテーマスイッチャーは現在のドメインでのみ有効です。そのため、すべてのサイトでダークモードを無効にすることはできません。代わりに、xLog を検出した場合に強制的にダークモードを無効にするスクリプトを作成する必要があります。
スクリプト：https://greasyfork.org/zh-CN/scripts/472216-auto-disable-xlog-dark-mode 自由に使用できます（MIT ライセンスでオープンソース）。