Is it possible to change the highlight style depending on theme variant?

[AndersBennedsgaard]

I have tried to search through Hugo docs, hugo-theme-relearn docs, and Google, but I have not been able to find some easy to understand information about how to change the markup.highlight.style depending on the params.themeVariant. Is this not possible without a lot of Hugo magic and custom HTML/CSS?

Currently, we use these params and markup config:

params:
  author.name: "<owner>"
  collapsibleMenu: true
  disableInlineCopyToClipBoard: true
  editURL: https://github.com/<org>/<repo>/edit/main/content/${FilePath}
  themeVariant:
    - identifier: zen-auto
      name: Auto
      auto:
        - zen-light
        - zen-dark
    - identifier: zen-dark
      name: Dark
    - identifier: zen-light
      name: Light

markup:
  highlight:
    style: tango

The tango highlight style renders some code blocks as unreadable white text when using the dark theme, as seen below:

With the light theme, the code block correctly shows cosign generate-key-pair

[McShelby]

Does this help? https://mcshelby.github.io/hugo-theme-relearn/basics/branding/index.html#syntax-highlighting

[AndersBennedsgaard]

Wow, thanks for the very quick answer!
I was looking for a way to do it through config, since I really can't do HTML/CSS. But after giving your guide a more thorough read-through, it was very simple to implement. So yes, that helped 😅