Syntax Themes

Code blocks with a language-* class are highlighted at build time by textlane, which runs VS Code's TextMate grammars and themes and gives the same markup as Shiki. Each token carries the light theme's color and the dark one's as a --shiki-dark variable, which the theme switches to with the toggle and the reader's setting, so code follows them too, with no script and no flash.

Configuration

The defaults are Livemark's:

codeThemeLight: catppuccin-latte
codeThemeDark: catppuccin-mocha

Any of the ~60 built-in themes works; see them on the Shiki playground. An unknown name fails the build. The block's frame, background and font still come from styles/content.css.

Popular pairings

• catppuccin-latte / catppuccin-mocha (the default)
• github-light / github-dark
• one-light / one-dark-pro
• solarized-light / solarized-dark
• rose-pine-dawn / rose-pine
• vitesse-light / vitesse-dark

A note on accessibility

Whatever colors you give code, check each one against the code block's background with a contrast tool before shipping. The threshold you need for normal-size text is 4.5:1 (WCAG AA). catppuccin-latte's green strings fall short on white, so htmlpress darkens them from #40a02b to #2a7e16, as Livemark does.

See also

• Code Blocks: the authoring side.
• Overriding/Escaping: replace the theme's code styles or the copy button script.