Hugo-coder: Automagic light/dark switching of custom CSS (for syntax highlighting)

[jemus42]

I'm happy about the theme's option to auto-switch light/dark themes, but I would like to be able to apply this to my code highlighting as well.

Currently I have in my config.toml:

# Custom CSS
custom_css = ["css/syntax-monokai.css"]

The CSS is generated via hugo gen chromastyles --style=monokai static/css/syntax-monokai.css – since chroma also offers a light version of monokai, I thought it would be neat if I could have my syntax-highlighting switch alongside with the site's theme.

I have looked around a bit, and there seem to be javascript-based solutions that I could add manually, i.e. conditionally load either "css/syntax-monokai.css" or "css/syntax-monokailight.css", but I thought I'd ask here first before I try to shoddily hack together a solution myself, as I assume that I may not be the only one who would find this useful.

Edit:
I have now implemented a (rather clunky) solution by overwriting layouts/_default/baseof.html with:

    {{ range .Site.Params.custom_css }}
      <link rel="stylesheet" href="{{ . | relURL }}" />
    {{ end }}
    {{ range .Site.Params.custom_css_dark }}
      <link rel="stylesheet" href="{{ . | relURL }}" media="(prefers-color-scheme: dark)"/>
    {{ end }}
    {{ range .Site.Params.custom_css_light }}
      <link rel="stylesheet" href="{{ . | relURL }}" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)"/>
    {{ end }}

which allows me to set in my config.toml:

    custom_css_dark = ["css/syntax-monokai.css"]
    custom_css_light = ["css/syntax-monokailight.css"]

I'm stil not fluent in TOML and the templating syntax to have custom_css contain both the light and dark portion, but at least it works. A "proper" solution would be cool, as I really don't like overwriting core template files anymore, I've been burned by my unmaintainable tweaks in the past 😅

[luizdepra]

ColorScheme and SyntaxHighlight is a couple that keeps fighting each other. I could not find a good solution, yet.

Your changes will do fine for your case. However, there is another option. You can create a single file with both options, and use color-scheme CSS rules to wrap and enable them only when needed.
Take a look how I do here. You can try something similar.

[jemus42]

Oh neat! I haven't dabbled in SCSS yet, but I assume I can include SCSS on top of the theme similar to how I can include CSS without having to mess with the base theme, right?

[luizdepra]

Yup. Be sure to use Hugo's extended binaries to be able to "compile" SCSS file through Assets Pipeline.