Minimal Dark Mode Styling
Published 1 year, 10 months pastSpurred by a toot in reply to a goofy dev joke I made, I’ve set up a dirty-rough Dark Mode handler for meyerweb:
@media (prefers-color-scheme: dark) {
html body {filter: invert(1);}
/* the following really should be managed by a cascade layer */
html img,
html img.book.cover,
html img.book.cover.big,
html #archipelago a:hover img {filter: invert(1);}
html #thoughts figure.standalone img {
box-shadow: 0.25em 0.25em 0.67em #FFF8;
}
}It’s the work of about five minutes’ thought and typing, so I suspect it’s teetering on the edge of Minimum Viable Product, but I’m not sure which side of that line it lands on.
Other than restructuring things so that I can use Cascade Layers to handle the Light and Dark Mode styling, what am I missing or overlooking? <video> elements, I suppose, but anything else jump out at you as in need of correction? Let me know!
(P.S. “Use only classes, never IDs” is not something that needs to be corrected. Yes, I know why people think that, and this situation seems to be an argument in favor of that view, but I have a different view and will not be converting IDs to classes. Thanks in advance for your forbearance.)
Comments (5)
Hi Eric! I’ve read that you should also set “color-scheme: dark” so that scrollbars change to a dark tint as well. Not sure if the invert filter would take care of that?
https://www.amitmerchant.com/darkmode-aware-scrollbars-using-css/
This is a bit surprising because the second rule is so verbose! What do you think of techniques such as this dark mode? Curious about your view as one of the CSS specialists because there are so many of these techniques! Thanks in advance!
Larry, I am indeed missing that; good catch! I’ll do some investigating and see where I end up with it.
Markus, the second rule’s verbosity is due to my old-school way of using classes and IDs in both my markup and my CSS, and deep reluctance to use
!important. And also a touch of what we used to call OGS, or Organic Growth Syndrome — the markup reflects a couple of decades of evolution. In a new project, I’d probably manage light/dark using Cascade Layers in some fashion.As for the minimal styles shown in Jens’ post, I don’t think those would work in many (most? any?) designs that use background images, as the styles don’t invert those images. That could end up putting white text over a white or otherwise light background image. Designers that don’t use background images (which includes CSS gradients) could use it without too much fear, I think, but I am not one of those.
This is actually how Wikipedia does its dark mode.
Turns out I did miss a couple of things! The exclusion list lacked
iframeandvideo, so they’ve been added: