I have generally had an aversion to dark mode on devices. It’s not that I object to it aesthetically; I do think it objectively looks better most of the time. And it’s not just that I’m an old curmudgeon who wishes we were still running Mac System 7 on Motorola 68000 series processors, although I do have fond nostalgia for those times.
It’s really my eyes. And even then, it’s not that I’m an old curmudgeon with failing eyes — although my eyes have definitely deteriorated through my 40s and into my 50s.
It’s my astigmatism.
I don’t just have astigmatism; I have weird astigmatism. The axis between my two eyes is turned almost 90 degrees. I can’t get glasses with full correction because it forces the muscles in my eyes in opposing directions in such a way to give me an almost instant headache. Fortunately, I can correct it enough to see reasonably well. But I digress…
Dark mode is difficult for people with astigmatism. You know those optical illusion tricks where you stare at a dot in the center of a reversed-color image for 60 seconds, then look at a blank wall and the “burn in” in your eyes shows you the actual image? My eyes do that with white text on a dark background after about 10 seconds, to the point where I can no longer read anything on the screen.
So, I rarely use dark mode. But I know I’m in a small minority.
CSS media queries now include a prefers-color-scheme
setting that lets you design your website to automatically adjust to the user’s light/dark mode preference. Combine that with CSS variables and it’s super easy to add dark mode to your website. In fact, I decided this morning to add dark mode to this site, and it only took me about 5 minutes. Choosing colors that actually look good can be a bit trickier, and you have to make judgment calls about some of your accent colors.
I decided to primarily just invert the neutral colors (white, black, grays) on my site, and I used this color inverter tool to find appropriate replacements. I didn’t change most of my accent colors, because they’re part of my brand, but I did switch to a lighter shade of blue for links, since I do already have two blues in my color palette.
I used this Dark Mode in CSS Guide for a few additional improvements, specifically using filter()
to adjust the brightness and contrast on images (except my logo), as well as to tone down the intensity of the PrismJS code blocks, since — at least with the implementation I’m using — it doesn’t seem to support automatic color modes.
If you’ve got your device on dark mode, or “automatic” and it’s nighttime, you should see dark mode right now! If you’re like me though, you’ll only see it if you temporarily turn on dark mode for testing purposes. And now that I’ve done this, I’m switching back to light.