People like reading in bed right before bed. Unfortunately, the best thing to read is frequently a phone or tablet. This appears to be bad, but this will be less bad in the future once websites start supporting automatic dark modes. You can help your visitors get to sleep faster, rest more, and be closer their fullest selves if you keep your website’s lights to a minimum when they’re browsing your site at night.

Not yet convinced? Read on.

Melatonin helps you get to sleep

There are many things that one can do to ensure that his ability to fall asleep isn’t impaired. One of the general strategies that turns up in getting-to-sleep advice is don’t let anything interfere with your body’s melatonin production.

Melatonin times sleep onset¹ and it’s naturally generated by your body once you stop seeing high-energy light. What sort of light is high-energy? Sunlight and light shifted toward the violet/blue end of the spectrum. What sort of light is lower-energy? Light that’s redder and more like candlelight. What can you do to see less high-energy light in the evening? Well, you could…

• wear blue-blocking glasses (they look yellow)
• use lower-color-temperature light bulbs and turn your daytime-simulating bluer bulbs off
• put Light Dims on LEDs, especially those annoying bright blue LEDs and white LEDs that are all the rage these days
• not look at any blue-light-emitting screens in the evening

That last one on the list is kind of hard to do for most people. Luckily, there’s something able to help with that.

F.lux and friends

Back in February of 2009, f.lux was released. It shifted everything on your monitor toward the red end of the spectrum and did so automatically based on your location and time of day, as sunrise and sunset depend on both the time of year and how far away from the equator you are. While f.lux is a fine piece of software, its core feature has been incorporated into almost all the major consumer operating systems: macOS, iOS, and Windows. These days, you can get just about everything red-shifted in the evenings, especially since I’m pretty sure there are third-party f.lux clones for current versions of Android as well.

Of course, there is still more that could be done. A screen that’s mostly reddish white is still more disruptive than a screen that’s mostly black. My book-reading app supports light text on a dark background, but what about everything else?

Exit light, enter night

One solution is to take all the UI changes that Books uses and build support for that sort of thing into the operating system. The OS will tell an application “the system is in light mode” or “the system is in dark mode”, much like it communicates “the user prefers high-contrast UI”. Any app that supports dark mode, for lack of a better word, will switch to mostly-light text on a mostly-dark background. This is much, much more pleasant at night than having your eyeballs bleached by white-background web pages surrounded by light-gray browser buttons and address bars.

What’s more, web pages can get in on the dark-mode action. Safari for macOS supports it, Safari for iOS will support it later this fall, and Firefox supports it on (at least) both macOS and Windows. As of this writing, it’s in the “intent to ship” state in the Chromium bug tracker, so it should be coming to a browser near you if it hasn’t already.

How much work is involved?

Eh, it depends. Possibly a lot if you’ve got a lot of images and/or diagrams.

Andy Clarke’s page on designing for dark mode is fairly helpful if you’re looking for how to choose colors and override them properly inside a @media (prefers-color-scheme: dark) { } block. On the other hand, dealing with images isn’t always easy or fast. If you use SVG icons or icon fonts for UI elements, some of them might look funny until a new version of Font Awesome is released with re-drawn designs that look good on a dark background. Apple points out that icons that look good as an outline in light mode often look better as a solid shape in dark mode.

User-chosen colors are another pain point that crops up and I don’t have any good answers for how to handle this. If you can manage to restrict your users’ color choices to a smallish palette, you can improve your odds of having nice-looking colors in either mode. However, any given user has a decent chance of picking colors that only look good in his preferred color scheme, making others squint to figure out what his nickname is or what a label says. Apple’s solution for their operating systems is to have a handful of predefined color names that subtly change in dark mode. For example, their .teal is a darker teal in dark mode than it is in light mode. This may be a bit more work if you support 55 different user-selectable colors (as Timing does), or impossible if you support 16½ million (as Twitch does for Prime and Turbo members).

Third-party visualization libraries are also another source of headaches. I’ve been having trouble getting chart.js to respond properly to color-scheme toggles. Its developers will probably figure out something, but if you want background-color-agnostic charts, you’re not going to be able to just set a color as a string and call it a day.

Why do all this work?

Late at night, dark things are pleasant to read. Light things are painful to read. You don’t want your website to be painful to read, do you? If your website is pleasant and soothing in a darkened room, your site will be more likely to be one of the last things on your visitors’ minds before they go to sleep. Sure, dark-mode changes are quite a bit of work to implement, but do you want to cede the opportunity to be the last thing your viewer reads right before nodding off?

What’s more, as more sites have dark modes available, people will have a little less trouble going to bed at a proper hour. Sure, there will still be loud cars and hungry babies and filled bladders and gnawing fears, but more people will get a better night’s sleep more often if the late-night high-energy photon blast is kept to a bare minimum. I’m happy to help other people sleep a little bit better, and you will too.