Simple Script to Generate Color Scheme Switchable Css

While I was working on yet another secret project that will probably never see the light of day, I wanted to blog about the experience of bootstrapping the project. As any developer, that means that instead of writing that blog post, I had to dust off my website theme, update hugo, and do other fixes.

I’ve settled on PaperMod as the theme, since it’s simple and to the point, and it also changes the style based on the preferred color scheme.

However, by default, there’s no way to have the code highlight theme change based on the preferred color scheme, but since I hopefully still know my css, and with the help of phind to generate some shell scripting, we now got this nifty script that can help you do just that, be it in a hugo theme, or any other kind of system as long as you “abuse” hugo for the generation of the theme only.

You see, hugo uses chroma for its theme support, so that makes it pretty flexible to generate the theme css using hugo gen chromastyles --style=your_style_here_from_the_big_list.

After picking the two color schemes I wanted, namely tango and nord (and fixing one of them, twice) I’ve set up to … instruct my lovely assistant to help me build what I need.

After some back and forth, and some suggestions on what’s wrong with the generated script based on ShellCheck, since Phind has an obsession it seems with escaping $, we got to this lovely code (Github Gist for convenience).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
#!/usr/bin/env bash
set -euo pipefail

# Default values
light_theme=""
dark_theme=""
destination_path="assets/css/extended/syntax.css"

# Help message
usage() {
  cat <<EOF
Usage: $0 [options] [--] [light-theme] [dark-theme]

Options:
  -h, --help                Show this help message and exit
  --light-theme=LIGHT_THEME Set the light theme
  --dark-theme=DARK_THEME   Set the dark theme
  --destination-path=PATH   Set the destination path for the output file

Positional arguments:
  light-theme              Light theme (alternative to --light-theme)
  dark-theme               Dark theme (alternative to --dark-theme)
EOF
}

positional_arg_counter=0

# Parse options and arguments
while [[ $# -gt 0 ]]; do
  case $1 in
    -h|--help)
      usage
      exit 0
      ;;
    --light-theme=*)
      light_theme="\${1#*=}"
      positional_arg_counter=$((positional_arg_counter + 1))
      shift
      ;;
    --dark-theme=*)
      dark_theme="\${1#*=}"
      positional_arg_counter=$((positional_arg_counter + 1))
      shift
      ;;
    --destination-path=*)
      destination_path="\${1#*=}"
      shift
      ;;
    *)
      if [[ $positional_arg_counter -eq 0 ]]; then
        light_theme="$1"
      elif [[ $positional_arg_counter -eq 1 ]]; then
        dark_theme="$1"
      else
        echo "Error: Too many arguments" >&2
        usage
        exit 1
      fi
      positional_arg_counter=$((positional_arg_counter + 1))
      shift
      ;;
  esac
done

if [[ -z "$light_theme" ]] || [[ -z "$dark_theme" ]]; then
  echo "Error: Missing arguments" >&2
  usage
  exit 1
fi

hugo gen chromastyles --style="$light_theme" > "$destination_path"
{
    echo "@media (prefers-color-scheme: dark) {"
    hugo gen chromastyles --style="$dark_theme" | sed -E 's/(^\/\*[^*]*\*\/)?(.+)/\1 .dark\2/'
    echo "}"
} >> "$destination_path"

For PaperMod specifically, I had to do a few tweaks.

Update config.yml|toml|xml

1
2
3
4
5
6
7
8
pygmentsUseClasses: true
markup:
  highlight:
    codeFences: true
    guessSyntax: true
    lineNos: true
    noClasses: false
    style: nord

Update the css with some custom overwrites to make sure we’re not overwriting the theme background color and fix a few rounded margins

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.post-content .highlight table {
    border-radius: var(--radius);
    background: var(--code-bg);
}

.post-content .highlight:not(table):not(:has(.chroma)) {
    margin: 10px auto;
    background: var(--hljs-bg) !important;
    border-radius: var(--radius);
    direction: ltr;
}

.post-content .highlight .lntable .lntd:first-child code {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.post-content .highlight .lntable .lntd:last-child code {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.post-content .highlight .lntable .lntd:not(:first-child, :last-child) code {
    border-radius: 0;
}

Needed changes might be slightly different for your theme!

How are you handling code highlights in your theme?