Code, meet mode

If you include code blocks in your website content, as I often do here, do you style them to meet your visitors’ preferences? Oh, you say you don’t know what those preferences are? Well, don’t feel too bad; neither did I, until a couple of days ago.

Recently, I decided to make some stylistic changes to this site; and it occurred to me that, while at it, I should think about how I presented code blocks herein. Up to then, I’d relied mostly on a Chroma stylesheet auto-generated by Hugo.

The only thing about doing that, however, is that you first have to select from a styles gallery; and I’d always opted for styles with dark-mode code blocks.¹ In other words, the code blocks were light-shaded text on dark-background blocks, even though the site’s CSS automatically makes everything else here conform to the visitor’s chosen display mode, light or dark. Since I see a lot of this sort of thing on many other websites, I didn’t worry too much about it — or, at least, I didn’t until I got curious and wondered what others out there might like to see.

That’s why, this past Saturday on Mastodon, I posted a poll about the subject, asking:

When reading a code block in your chosen viewing mode (light or dark), which of these should the code block always do?

Although the poll got only 139 votes over its twenty-four-hour life, it had roughly these percentages from the beginning:

These results made it pretty clear to me what I should do.

Thus, the appearance of the site’s code blocks, like that of pretty much every other element herein, now matches your chosen display mode. Also: to confirm the results met accessibility guidelines, I used WebAIM’s online tools for checking the contrast of both text and links.²

My code always has its flaws but, from here on, perhaps at least it will be pleasant to view.