Kishore Vancheeshwaran
Syntax highlighting in light and dark mode in hugo

Hugo by default uses chroma for syntax highlighting. You can also use your own stylesheets for syntax highlighting. According to the docs you set pygmentsUseClasses=true in your config and then run the following command to generate the stylesheet.

1hugo gen chromastyles --style=<style_name> > syntax.css

Here is a helper script I have created to generate syntax.css for the different styles available in the chroma repository.

 2#!/usr/bin/env bash
 3set -euo pipefail
 5# the cp is just a way to track which css you might end up liking
 6cp static/css/syntax.css static/css/syntax_$(date +'%Y_%m_%d_%H_%M_%S').css
 7hugo gen chromastyles --style=$1 > static/css/syntax.css
 8echo "@media (prefers-color-scheme: dark) {" >> static/css/syntax.css
 9hugo gen chromastyles --style=$2 >> static/css/syntax.css
10echo "}" >> static/css/syntax.css

Now you can run the script by calling it from the root of your project as follows.

1bash solarized-light solarized-dark

Point to note is that the first argument is the light theme and the second is the dark theme.

When I go through the source code of chroma I see that each style have different number of total definitions for syntax highlighting. I suggest to pick two themes from the top 10 which can cover a lot of syntax for highlighting so that you don’t end up with a css which you would have to fill up manually for colours.

 1git clone
 2wc -l chroma/styles/* | sort -h | tail
 4   59 styles/murphy.go
 5   60 styles/lovelace.go
 6   62 styles/xcode-dark.go
 7   71 styles/doom-one2.go
 8   75 styles/nord.go
 9   79 styles/tango.go
10   81 styles/base16-snazzy.go
11   81 styles/dracula.go
12   95 styles/vulcan.go
13 1988 total

I have picked tango and doom-one2 as my light and dark syntax themes respectively. What have you picked? Send me an email and let me know :) I hope this was useful to you.

If you would like to leave a comment, contact me via email.
Post 5/99 - part of 100DaystoOffload