I wrote up what it takes to add simple #darkmode support to a site so it can have a light theme on light-colored screens and a dark theme on dark screens (and not blast your eyes out).
Just CSS media queries for the alternate styles!
@media (prefers-color-scheme: dark) {...}
And <picture><source><img></picture> to swap out images to fit different schemes.
https://hyperborea.org/tech-tips/darkmode-web/
On that note, anyone know how to test this in Chrome or Safari without changing the system theme?
After messing with #darkmode the last couple of days I'm reminded of how way back in #Windows95 you could set a theme for the system UI by choosing individual colors for window backgrounds, borders, buttons, dialog boxes, etc. I liked to set the standard gray background to sepia and see which programs used the system colors and which hard-coded gray, making their UI a weird patchwork where their custom components weren't the same scheme as the built-in ones.
@KelsonV
for chromium based browsers you can use this to switch: https://dev.to/codepo8/quick-developer-tools-tip-simulating-dark-light-colour-mode-1cpg
@FiXato Thanks! what's funny is I saw that page but only looked as far as the first half of the article on finding the menu item in Edge! 🤦♂️
OK, thanks to @FiXato I've updated it with directions for Chrome and other Chromium based browsers!
Still not sure how to do it in Safari. I'll experiment when I have time, but if anyone here happens to know, please pass along the info! Thanks!