My Blog

2 min read

A dark theme of my own

I looked through a lot of ready-made Hugo themes and did not like any of them. So this blog now has its own: dark, warm, and small enough to read in one sitting.

What it looks like#

  • A warm near-black background instead of pure black, which is harsh to read on, with off-white text.
  • One accent colour, amber, for links, dates and the current menu item.
  • A serif for reading, and small uppercase monospace for dates, labels and the menu.
  • Code blocks a shade darker than the page, with their own colour scheme.

The security policy decides more than you think#

The web server sends a strict Content-Security-Policy: stylesheets, images and fonts may only come from this site itself. That shaped the theme in three ways.

  • No web fonts from elsewhere. The theme uses fonts that are already on the reader’s computer: Charter on a Mac, Sitka or Cambria on Windows. They cost nothing to load.
  • No inline styles for code. By default Hugo colours code by putting a style="..." attribute on every word, and the policy blocks those. The colours would simply have vanished on the live site. The theme now asks Hugo for CSS classes instead (noClasses = false) and colours those.
  • No inline styles for tables. A Markdown table with a right-aligned column also gets inline styles. A small render hook writes classes instead.

Neither problem shows up in a local preview, because the preview server sends no policy at all. A check after every build now fails on any inline style, so they cannot sneak back in.

A stylesheet that changes its name#

The server lets browsers keep the CSS for an hour. Right after a deploy, a returning reader could get the new pages with the old stylesheet. Hugo now puts a hash of the file’s contents in its name, so a new stylesheet is a new file, and old and new are never mixed.

Small things#

  • Headings get a # link when you hover over them, so you can link straight to a section.
  • Every post ends with links to the next older and newer post.
  • The 404 page got a large, glowing 404.
  • There is a favicon: the same amber dot that sits next to the blog’s name.