Syntax Highlighting that respects CSS prefers-color-scheme

I would like to have syntax highlighting that respects the prefers-color-scheme of modern browsers. For example, for prefers-colors-scheme: dark, I’d like to highlight with gruvbox-dark, but obviously use gruvbox-light for prefers-color-scheme: light.

Would such a feature be accepted? I don’t know enough about the current architecture of Zola to be able to just implement it, but I think we’d need to combine syntect classed html generation with style tags that we insert during rendering somehow.

I’m willing to implement such a feature, but will definitely need help.


I like the idea in principle but I have no idea how easy it will be to implement. I haven’t used syntect class based highlighting and that means we would somehow need to generate CSS files from the syntax schemes. I think the easiest way to start that would be to create a simple pulldown-cmark parser that will add the classes from syntect. Once this is proven to work, it should be easy to integrate with Zola.

The main thing I’m worried about is how to configure all that in the config.toml since that adds quite a bit of complexity.