toggle syntax highlighting when dark/light theme button toggled

[salmanhk]

Is there a way to toggle between syntax highlighting when the theme dark/light button is toggled? For example, you could generate two css files and use the correct one.
hugo gen chromastyles --style=monokai > syntax_darkmode.css
hugo gen chromastyles --style=vs > syntax_lightmode.css

Code seems to become unreadable otherwise.

This:

becomes this:

I have uncommented line 17 of the app.scss file and generated the chromastyle css in \static\css.

Thanks.

[kevinrpb]

Hi there! There is an easy way of doing this. In you syntax_darkmode.scss, you can enclose everything with a body.dark selector. That way when the body changes the class that enables dark mode your code highlighting will also change. E.g.:

// syntax_lightmode.scss

/* Background */ .chroma { background-color: #f8f8f8 }
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* ... */

// syntax_darkmode.scss

body.dark {
  /* Background */ .chroma { color: #f8f8f2; background-color: #282a36 }
  /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
}
/* ... */

Beware that you might need to tweak other things in dark mode such as the default code background to match the theme. In my case I could do this with:

// syntax_darkmode.scss

body.dark .chroma code { background: none; }
/* ... */

[salmanhk]

Something is still off. Do I need to make any changes in head.html, i.e. importing both the css files like so:

  <link rel="stylesheet" href="/css/syntax_lightmode.css"/> 
  <link rel="stylesheet" href="/css/syntax_darkmode.css"/>

And for clarification, I have css files generated by hugo codegen, not scss. Is that a typo or should I actually have scss files?

[kevinrpb]

Hugo generates whatever you tell it (recall the line you use to generate the files, you could choose a different extension). Basically in this example CSS and SCSS are interchangeable (since SCSS is a superset of CSS).

My advice is that you use SCSS and let Hugo compile them for you instead of adding them yourself. To do so:

1. Rename your files' extension to be scss instead of css.
2. Put your files into assets/scss/components/
3. Edit assets/scss/app.scss:

• Here, replace that one @import "components/syntax"; to @import "components/syntax_lightmode";
• Add a new line @import "components/syntax_darkmode";

This way you don't have to edit anything in the HTML files, since Hugo will take care of the styles. Just remember that for the darkmode one you should enclose it as I mentioned, otherwise they will not be applied 😀

[salmanhk]

Fantastic. The only additional thing was to change the encoding of the scss files from utf-16 to utf-8.
Thank you!