Getting dark/light code theme on my website working

Created: 2025-09-12
Last Modified: 2025-09-12

After switching my blog to another minimalist css framework, which is this time tiny.css. I am happy with the the clean new look. But one thing immediately bugged me: the code syntax highlighting. Hugo’s default syntax highlighting just didn’t look right on both light and dark modes. There were always distracting white or black corners and the colors felt off. This post is about how I fixed it, creating a beautiful, theme-aware code style with Catppuccin.

I saw that in the config.yaml (or toml or json) it is possible to configure how the markup is getting highlighted. You can read about it on the official documentation about markup.highlight. In particular the parameter markup.highlight.noClasses strikes my interest. Here is the description:

(bool) Whether to use inline CSS styles instead of an external CSS file. Default is true. To use an external CSS file, set this value to false and generate the CSS file from the command line:

hugo gen chromastyles --style=monokai > syntax.css

Okay, nice! I can generate static CSS with this command for the light and dark theme and ship it. Nothing easier than that!

With these two commands I generated the styles.

hugo gen chromastyles --style=catppuccin-latte > ./static/css/style-light.css
hugo gen chromastyles --style=catppuccin-mocha > ./static/css/style-dark.css

Then I could just use the following css to bind them together:

@import "syntax-light.css";
@media (prefers-color-scheme: dark) {
  @import "syntax-dark.css";
}

Well, no! This is where only the light theme worked and the dark theme never showed up. But why? Searching on the web for the @import brought me then to the documentation about @import, which clearly mentions:

The @import CSS at-rule is used to import style rules from other valid stylesheets. An @import rule must be defined at the top of the stylesheet, before any other at-rule (except @charset and @layer) and style declarations, or it will be ignored.

Alright, what are the options? I want a simple and scriptable solution. Why not just put all the css in the media queries like:

@media (prefers-color-scheme: light) {
  /* all light theme css here */
}
@media (prefers-color-scheme: dark) {
  /* all dark theme css here */
}

Looks good to me. And it is scriptable too!

Here is how I am doing it:

#!/usr/bin/env bash

(
	echo "@media (prefers-color-scheme: light) {"
	hugo gen chromastyles --style=catppuccin-latte
	echo "}"
	echo ""
	echo "@media (prefers-color-scheme: dark) {"
	hugo gen chromastyles --style=catppuccin-mocha
	echo "}"
) >./static/css/syntax.css

How does it look? You are looking at the result right now! You can now enjoy a consistent look on on this blog with beautiful Catppuccin color theme.