Someone recently pointed out to me that though we can disable a profile's theme in the event of eyestrain or other issues, it does not also disable the custom CSS which might be present on someone's profile modules and journals (guilty as charged). I tend to live on the Dark Side of the Force (we have cookies), and so I did what I tend to do and CSS-coded everything on my profile into a high-contrast dark theme.

Actually, I do that because I work with computers all day and tend to get migraines from bright backgrounds on electronics. Hell, I even light all of my workspaces with LED-based indirect lighting to take the edge off. What I did not realize, is that the exact opposite thing can occur--other folks get a massive headache from bright text on a black background. As someone who dabbles in web design on the side and is trying to do so with some awareness of accessibility, this will not do.

Initially, I thought that a css-based checkbox input coupled with some CSS display:block/hide tricks might make a good light/dark toggle. But that--along with several derivatives I began tinkering with started to make a complicated mess. To make matters worse, someone has to potentially switch TO the thing they need, rather than have it by default.

Enter CSS Media Queries. As it turns out, this appears to be a good solution. It goes something like this (placed inside style tags before your code):

@media (prefers-color-scheme: dark) {
selector {/* -- CSS Code here -- */}
}

@media (prefers-color-scheme: light) {
selector {/* -- CSS Code here -- */}
}

How does it work? You create two styles, one for light and one for dark, and slap the corresponding code right in between the brackets of the @media (prefers-color-scheme: light/dark) sections. There's no nifty on-screen toggle (sadly; is usually done with JS), however, if a user has defined light or dark mode in their web browser's settings, they will get the corresponding version of your CSS!

This journal entry is coded with both a light and a dark theme -- if you want to see, open your browser's settings (maybe in a new window), toggle light/dark mode there, and see what happens here :D

Though it should be pointed out, There apparently is a bug in Chrome right now that keeps this from working. Chromium-based browsers such as Edge, Brave, and Firefox-based browsers seem to be fine, however.