Since xLog introduced Dark Mode, the low contrast caused the gray text to be difficult to read, so I stopped using xLog (and also stopped writing and reading) and looked forward to an official update. However, months have passed and there has been no improvement (does the development team not use Dark Mode?)... Well, I'll do it myself.
Disable Dark Mode for My Own Blog#
Because xLog does not support custom JavaScript, it is not possible to directly modify the Dark Mode logic of xLog. Therefore, the CSS under Dark Mode can only be forcibly overridden to Light Mode.
Warning
Using this feature means that you need to constantly follow the official style updates of xLog, otherwise it will affect the blog's appearance. If you use it, please bear the related risks yourself.
The CSS below covers as many styles as possible under Dark Mode and hides the Theme Switcher (you can view the current site to preview the effect).
In addition, because xLog uses a Service Worker, you may need to refresh twice to see the latest effect after modifying the site style.
Attached: CSS
First, open your blog page and switch to Light Mode. Then execute the script below in the browser console to get your theme color.
Of course, you can also execute it from someone else's xLog blog to get their theme color.
['--auto-hover-color', '--auto-theme-color', '--auto-banner-bg-color'].forEach(name => console.log(`${name}: ${getComputedStyle(document.documentElement).getPropertyValue(name)} !important;`))
Replace the variables in the first .dark with the values obtained.
.dark { /* Replace the values of the three variables below */
--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;
}
Disable Dark Mode for Other Blogs#
Because xLog supports custom domains, and the Theme Switcher for Dark Mode only works on the current domain, it is not possible to simply disable Dark Mode for all sites. So... I wrote a script to detect xLog and forcibly disable Dark Mode.
Script: https://greasyfork.org/en/scripts/472216-auto-disable-xlog-dark-mode (available for free use under the MIT license).