Hi there! This is my first post to this community.
I set up my website using hugo-PaperMod and am generally very happy with how it looks and how configuration is done. However, there’s one thing, that’s really bugging me:
I would like the syntax-highlighting-style to switch automatically, when I toggle between light- and dark-mode.
hugo-PaperMod uses highlight.js by default, but there’s an option to switch to Chroma, which I’ve done. I also found a post, that basically shows how to implement toggling of syntax-styles by utilizing a css-media-query to @media (prefers-color-scheme: dark) {.... Specifically the post suggests the following script to generate a css-file that auto switches the syntax-theme from light to dark:
# generate_syntax.sh
#!/usr/bin/env bash
set -euo pipefail
# the cp is just a way to track which css you might end up liking
cp static/css/syntax.css static/css/syntax_$(date +'%Y_%m_%d_%H_%M_%S').css
hugo gen chromastyles --style=$1 > static/css/syntax.css
echo "@media (prefers-color-scheme: dark) {" >> static/css/syntax.css
hugo gen chromastyles --style=$2 >> static/css/syntax.css
echo "}" >> static/css/syntax.css
However, I can see three problems with this approach:
The post uses static/css/syntax.css, but that didn’t work for me. I’m using assets/css/extended/syntax.css, which is working.
The switching doesn’t seem to happen, so I think the media-query failed
The background of code-snippets seems to be hardcoded (to #2e2e33 in the case of hugo-PaperMod). This would have to be adapted somehow, but I didn’t even find a way to adjust the background-color manually!
Is there anyone that knows how I could implement the things I requested above?
@CCMike thanks for your reply first and foremost! Sorry, I forgot to link to the site. The code is hosted here. You can see how a code-snippet is formatted here: First post | Tim Hilt
is it’s a preference set at the browser or operating system level. When you switch from light to dark on your site, it just adds a class of dark to your <body> so that media query won’t be affected by it.
What you need to do instead is have your default syntax highlighting styles for the light site, then prefix all of your dark ones with .dark.
I’d recommend using Hugo’s built-in syntax highlighting with Chroma over using highlight.js. Unless you’re pulling in code block from an external source, I can only see downsides of rendering the syntax highlighting in the front end - it’ll be slower with extra dependencies.
It’s possible you might need to trigger the library to re-render when you switch colors around here, but from what I see, you should be able to do it all with CSS.
Oh, sorry for the confusion. As I stated above, I switched from using highlight.js to Chroma. You can see that the site is already using Chroma by looking at the html you showed above.
But that might not make a difference! When I searched the code of Hugo-PaperMod for this color, I only found it being used in two other, seemingly unrelated places. Note, that I haven’t checked other color models though. Only hex.
Prefixing the dark styles with .dark fixed it! Thanks! Also I found out how I could customize the background-color. Basically I followed this discussions answer and overwrote the --hljs-bg with a value that suits my themes better.
