dark mode

Dark mode is a setting you can activate on many devices, or a theme you can toggle on individual websites, which makes backgrounds black or dark, and the text on top light. Many people like it because they feel the lower overall brightness reduces their eye strain, or because it’s supposed to be better for their devices’ battery life. (Basically, on an OLED screen, pixels that are black get the light behind them turned off entirely, so if there are a lot of black pixels, less light is used and therefore less power consumed.) Other people, though, including myself, find dark mode harder to read and less comfortable to the eye. The best way to deal with this as a web developer (or any other kind of developer, really) is to offer both modes, preferably with some way of detecting users’ set preference and serving them up the correct stylesheet accordingly.

The easiest way to implement dark mode, and the way I’ve done it on this site, is to have two stylesheets: your primary stylesheet, including the colour scheme you consider your site’s default; and a supplementary stylesheet that overrides the colours for users of the opposite mode, linked to with a media attribute that specifies it is to be used if the user’s preference is [light|dark] mode. For example, in my site’s <head>, I link to the two stylesheets like so:

<link rel="stylesheet" href="/css/base-stylesheet.css">  
<link rel="stylesheet" href="/css/dark-mode.css" media="screen and (prefers-color-scheme: dark)">

This is not the only way. Indeed, this way is somewhat limited: you might prefer that users can switch between light and dark modes at will, rather than just displaying them the mode that matches their pre-set preferences. A Complete Guide to Dark Mode runs through some of your other options, and also talks about some other design considerations (e.g. image brightness, text thickness and shadowing).

For people with astigmatism, “dark mode” (light text on a dark background) is harder to read than “light mode” (dark text on a light background). Apparently the explanation has to do with light levels: the greater amount of light given off by a light-coloured background causes the iris to close a bit more, reducing the impact that the deformed lens which causes astigmatism can have. For people with either astigmatism or short-sightedness, light text on a dark background can cause “halation”, where letters appear to bleed into the background, creating a foggy impression that can make things hard to read. For me personally, I get these greenish lines covering my field of view, and as they start “swimming” across my vision, the overlapping lines (of the continuing text and the “burnt-in” lines) start to disorient me and I can’t keep my place in what I’m looking at (plus, it’s kind of nauseating). So, I find it unsustainable to read extended text in dark mode.

dark mode

Relevant Blog Posts of Mine

See Also / References