Night Mode

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

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 the myriad features 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; }

For the navbar logo, my initial idea was to have a mid-grey logo which darkens and lightens by adjusting the brightness based on the mode:

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

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

This worked nicely for some browsers, e.g. firefox, but not others, e.g. safari; perhaps because the cache is cleared for some but not all. I’ve instead implemented a dark-mode logo using a background image in dark.scss¹.

As for other features, 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.

Lua Filters are a powerful tool. The _quarto.yml file includes one to check my current installed version of Quarto and then insert that into the website’s page-footer².

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.

Footnotes

1. As suggested in Quarto Discussions

2. Suggested solution in Stack Overflow