---
slug: site-updates-dark-mode-and-about-pics
title: "Site Updates: Dark Mode and About Page Pictures"
date: "2024-05-27T18:39:00-04:00"

pics:
  dark-mode:
    css: "image"
    tip: "New dark theme active and \"Switch Theme\" menu icon highlighted."
    sources:
      - "/files/posts/site-updates-dark-mode-and-about-pics/dark-mode-1024.webp"
      - src: "/files/posts/site-updates-dark-mode-and-about-pics/dark-mode-1024.png"
        width: 1024
        height: 464
  image-carousel:
    css: "image"
    tip: "Image carousel at bottom of About page."
    sources:
      - "/files/posts/site-updates-dark-mode-and-about-pics/image-carousel-1024.webp"
      - src: "/files/posts/site-updates-dark-mode-and-about-pics/image-carousel-1024.png"
        width: 1024
        height: 403
---

A couple of site updates:

- Added [dark mode][] support and a dark theme.
- Added pictures on the [About page][].

### Dark Mode 

[Dark mode][] uses a [`prefers-color-scheme` media
query][prefers-color-scheme] 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.

Screenshot:

[{{< pe-figure "dark-mode" >}}][shot]

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][picture-element]).
- Accessibility (`title`, `alt`, `aria-label`, `<figcaption>`, etc).
- Ability to specifily all of the above in the article [front
  matter][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:

[{{< pe-figure "image-carousel" >}}][image-carousel-shot]

[dark mode]: https://en.wikipedia.org/wiki/Light-on-dark_color_scheme
  "Dark mode"
[prefers-color-scheme]: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
  "prefers-color-scheme media query"
[about page]: {{< relref "/articles/about.md" >}}
  "about page"
[shot]: /files/posts/site-updates-dark-mode-and-about-pics/dark-mode.png
  "New dark theme active and \"Switch Theme\" menu icon highlighted."
[hugo]: https://gohugo.io/
  "Hugo static site generator"
[markdown]: https://en.wikipedia.org/wiki/Markdown
  "Markdown markup language"
[responsive layout]: https://en.wikipedia.org/wiki/Responsive_web_design
  "Responsive web site layout"
[bulma]: https://bulma.io/
  "Bulma CSS framework"
[front-matter]: https://gohugo.io/content-management/front-matter/
  "YAML-formatted article metadata."
[picture-element]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
  "The <picture> element"
[image-carousel-shot]: /files/posts/site-updates-dark-mode-and-about-pics/image-carousel.png
  "Image carousel at bottom of About page."
[shortcode]: https://gohugo.io/content-management/shortcodes/
  "Snippets in Hugo content files which call custom templates."