Framed, dual-theme code blocks for any Hugo site, applied post-build (no theme changes)

Hi all,

I built a tool I’d like to share, since it addresses a few things that come up here regularly: different syntax highlighting for dark and light mode, theme CSS bleeding into code blocks, and hand-rolling copy-to-clipboard buttons. If you’ve ever generated two Chroma stylesheets and fought your theme’s specificity to make dark mode work, this is for you.

Kazari is a Go library and CLI that upgrades code blocks to framed, syntax-highlighted blocks with copy buttons, line numbers, collapsible sections, and dual light/dark themes. The dark mode part is the piece I think this community will care about most:
both themes are baked into the HTML as CSS custom properties at build time, so switching is pure CSS. No second stylesheet, no hugo gen chromastyles twice, no flash on toggle or page load, no JavaScript involved in the switch.

The Hugo integration needs zero changes to your theme or pipeline:

hugo --minify
kazari process ./public

kazari process walks the built HTML and rewrites the code blocks in place. Everything else on the page is untouched, and running it twice is a no-op, so it’s safe as an unconditional build step. It reads Chroma’s output fine, and translates hl_lines to line markers. An optional one-file render hook unlocks per-block options (titles, marked ranges, focus lines, collapse ranges) straight
from the fence: ```go {title=“main.go” mark=“3-5”}.

Highlighting is done by Nuri, a pure Go port of Shiki, so you get TextMate grammars and real VS Code themes rather than Chroma’s lexers, with no Node in the pipeline.

Live example (a small Hugo site, already processed): Kazari with Hugo | Kazari Hugo Example

Source, docs, and the Hugo guide: The Kazari Project | Kazari (MIT)

I’m the author, happy to answer questions or hear what’s missing for your use case.

A note for the maintainers, if any read this: Nuri is a pure Go Shiki port (TextMate grammars, VS Code themes, no cgo, no Node), which I believe makes it the first realistic alternative to Chroma for Hugo’s built-in highlighting. I understand a dependency like that is a big ask and Chroma has served Hugo well, but if there’s ever appetite for Shiki-grade highlighting or first-class dual themes in core, I’d be glad to discuss what that could look like. No expectations either way.

This is vastly simplified in the next release (v0.165.0) with a new css.ChromaStyles function that leverages modes.

That’s great to see, and it will simplify things a lot for folks who just want dual-mode token colors. Nice work.

Kazari’s dark mode does go a bit further: both themes ride along as CSS custom properties on each token, so any VS Code theme pair
works (not only styles that have a dark counterpart), and there’s no stylesheet to generate or keep in sync. But to be fair, the
colors are only one piece of why I built it. The frames, copy buttons, line markers, collapsible sections, and per-block titles
are the bulk of it, and those are out of scope for Chroma styles either way.

Looking forward to 0.165, that’s a great improvement.