Different syntax-highlighting-styles for light and dark theme

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:

  1. 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.
  2. The switching doesn’t seem to happen, so I think the media-query failed
  3. 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?

Do you have a link to the site / repo?

@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

My understanding of:

@media (prefers-color-scheme: dark)

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.

1 Like

Yes, that‘s a great recommendation. I‘ll try this out tomorrow! Thank you very much! :slight_smile:

Do you have any idea about the background-color too?

I’m not familiar with highlight.js but I couldn’t see any hard coded styles:

<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-c++" data-lang="c++"><span class="line"><span class="cl"><span class="n">std</span><span class="o">::</span><span class="n">vector</span><span class="o">&lt;</span><span class="kt">int</span><span class="o">&gt;</span> <span class="n">vec</span> <span class="p">{</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">};</span>
</span></span></code></pre><button class="copy-code">copy</button></div>

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! :slight_smile: 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.

Thanks again for your help!

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.