WIP: Add auto light/dark syntax highlight theme switch with chroma

[ataias]

Hi,

I use syntax highlighting in my personal website and I wanted to discuss about having light/dark syntax highlight switching. Is this something other people also want or care about?

From what I looked, hugo-PaperMod does not currently offer that and the css variable --hljs-bg: #2e2e33; that defines the background is hard-coded the same for light and dark. I am not sure why the background is set in the hugo paperMod sheet anyway... maybe a highlightjs limitation? I didn't look into it.

I was already using chroma, which is the built-in syntax highlighter from hugo and I find it fantastic as I don't need to care about which languages are supported in the highlightjs bundle or its size. Chroma runs when hugo builds the site and it works by either

1. embedding the styles in the code block or,
2. adding classes to it.

I was using the first approach, but I couldn't figure out a way of making it work if I wanted to switch light and dark. Maybe I could add some JS that would later toggle the things? It seemed to be a pain.

I tried approach 2 then, which is this PR. It has the following:

• Two CSS sheets for light and dark mode:
  • light: hugo gen chromastyles --style=emacs
  • dark: hugo gen chromastyles --style=dracula and then search/replace .chroma to .dark .chroma
• Workaround: remove highlights (had some conflicts, maybe I could have just removed the background css var or something? IDK)

I tested this against my website locally, making sure config had noClasses = false set so that hugo chroma uses the classes approach.

[markup]
  [markup.highlight]
    noClasses = false

The result can be seen in the quick video below where I toggle the style.

Screen.Recording.2020-12-19.at.04.40.26.mov

Questions

• What are your opinions on this? Is it promising?
• What would be the next steps to get this ready for a merge? IMO this would be the following:
  • Create properties "light" and "dark" with reasonable defaults that can be overriden by user to select the chroma classes
  • Generate the css automatically based on such values (maybe hugo gen chromastyles with sed for necessary changes and then saving the css, or some hugo templating thing)
  • decide on what to do with highlightjs: either make it togglable instead of a requirement like now, or remove it

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
37 Code Smells

No Coverage information
0.0% Duplication

[michaeloliverx]

+1 I am interested in this feature!

[adityatelange]

@ataias Sorry for delay, we'll look into this after few weeks as I am busy, so new features for theme are on hold

[ataias]

@adityatelange No problem! I have been busy too, so I may take a couple weeks to do some updates and remove the WIP.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.