Going Dark

While writing about the responsive design of ByteKit,I wanted to demonstrate the fact it has both light and a dark themes. At this exact moment I realised that this blog itself has no dark theme. When I setup to setup Hugo for it I simply used an existing theme named hestia-pure. As it didn’t support the dark theme, neither did my blog.

Meanwhile, it was necessary to fork it it due growing needs. Most notably it rely on SCSS, where I want CSS written by hand without any Javascript post-processing. With modernish CSS features like variables supporting the color scheme is easy and this blog is based on gruvbox.

/* https://github.com/morhetz/gruvbox?tab=readme-ov-file#light-mode-1 */
:root {
  --bg: #fbf1c7;
  --red: #cc241d;
  --green: #98971a;
}

Going dark

With CSS variables in place, the dark theme simply redefines variables using prefers-color-scheme: dark @media query.

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #282828;
    --red: #cc241d;
    --green: #98971a;
  }
}

And the page itself can advertise supported schemes and its priority.

<meta name="color-scheme" content="light dark" />

Fixing Mastodon comments

Taking an inspiration from https://carlswchwan.eu, I added support for Mastodon comments. The problem was that I originally reused a CSS from a different blog and didn’t actually used site’s CSS variables. This has been fixed and styling for comments gor merged to main style.css.

/* Mastodon comments */
#load-comment {
  background-color: var(--blue);
  color: var(--bg);
  border: 1px solid var(--blue12);
}

Color scheme based screenshots

One of the coolest things about this exercise is that HTML itself supports @media queries, making it easy to render different images based on a preferred color scheme. This means that page with a light style will display light screenshots. And vice versa.

<picture>
  <source srcset="screenshot-dark.png" media="(prefers-color-scheme: dark)">
  <source srcset="screenshot-light.png" media="(prefers-color-scheme: light)">
  <img src="screenshot-light.png" alt="Miblog screenshot">
</picture>

Color scheme thumbnails

There is another problem on the main index page. Unfortunately, most of article thumbnails were not created with dark theme support in mind. The responsive ByteKit is the first article to feature the support for dark themed thumbnails and dark themed screenshots.