# Syntax Themes

> Pick light and dark themes for code blocks.

Code blocks with a `language-*` class are highlighted at build time by [textlane](https://textlane.dev), 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:

```yaml
codeThemeLight: catppuccin-latte
codeThemeDark: catppuccin-mocha
```

Any of the \~60 built-in themes works; see them on the [Shiki playground](https://textmate-grammars-themes.netlify.app). 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](/authoring/code-blocks/): the authoring side.
- [Overriding/Escaping](/customization/overriding-escaping/): replace the theme's code styles or the copy button script.