Night Mode

Making full use of Quarto and sprucing up an oft-visited 404 page

Carl Goodwin


November 22, 2022

It was only last April that I renovated my blog as described in A Fresh Lick of Paint. Following the launch of a new open-source scientific and technical publishing system, it’s time to get the paint brush out again.

I initially started to convert some of my projects and posts from Rmarkdown to qmd using format: hugo-md. The thought was to keep my existing site aesthetic, with its beautiful Hugo Apéro theme, unchanged. I found though that it wasn’t possible to make full use of “all the bells and whistles” offered by Quarto. For example code-link: true and date-modified: last-modified. This is because the document metadata is preserved as-is for formats like Hugo.

So, I decided to start building a “full-on Quarto” version, i.e. format: html, with the intent of switching the website over only if I preferred the new versus the old when running the two side-by-side.

I’ve switched over.

I’ve given the site a unique look-and-feel by customising the flatly and darkly themes with a number of SASS variables in two theme.scss files, for example, to adopt my own reversible colour scheme.

The landing page switches image based on the dark-mode setting by making the class of the first image .dark-mode and adding these two lines in the dark theme’s custom scss file:

.dark-mode { display: block; }
.light-mode { display: none; }

Then the second image has the class .light-mode and uses the mirror css code in the light theme’s custom scss file:

.light-mode { display: block; }
.dark-mode { display: none; }

The mid-grey logo on the left-side of the navbar also darkens and lightens based on the dark-mode setting by adjusting the brightness based on the mode:

.navbar-logo {
    filter: brightness(2);
    max-height: 30px;

.navbar-logo {
    filter: brightness(20%);
    max-height: 30px;

As for “all the bells and whistles”, not only does the site now have the code-link, date-modified, and dark-mode, but it also restores the grid-based listing pages given up when moving from Hugo Academic. Many other Quarto features such as call-outs, citations, footnotes and freeze are also now deployed.

Whilst refreshing the site, I took the opportunity to make my 404 page a little more welcoming as it seemed to be one of my more popular pages. Feel free to try it by visiting an imaginatively made-up page of your choice.

The updated repo is public on github.