Site Updates: Dark Mode and About Page Pictures

May 27, 2024

A couple of site updates:

Dark Mode

Dark mode uses a prefers-color-scheme media query to determine the default theme, so it should do the right thing™ for people who have their system configured to prefer a dark color scheme. The theme can also be set explicitly using the “Switch Theme” icon on the right side of the menu bar.

There is a minor refresh bug and probably a few rough edges with older content, but I will get them sorted as time permits.


New dark theme active and "Switch Theme" menu icon highlighted.

New dark theme active and "Switch Theme" menu icon highlighted.

I strongly prefer dark mode and have wanted to add it here for years, so this change is a big victory for me.

About Page Pictures

There’s not much to say here; the About page now has a couple of pictures.

Adding the images in a way that I was satisfied with turned out to be a lot more effort than you might expect… This site is statically generated with Hugo, the theme is a heavily-customized version of Bulma, and blog posts and articles are written in Markdown.

The features that I wanted were:

  • A responsive layout containing a horizontal row of images on desktop which gracefully falls back to a vertical list of scaled thumbnmails on mobile.
  • Multiple image format support (in other words, the <picture> element).
  • Accessibility (title, alt, aria-label, <figcaption>, etc).
  • Ability to specifily all of the above in the article front matter.

In order to support everything above, I ended up copying my existing pe-figure shortcode and modifying it to support image “carousels” in articles.

In any case, it’s done now. Here is the result:

Image carousel at bottom of About page.

Image carousel at bottom of About page.