# 语法主题

> 为代码块选择浅色和深色主题。

带有 `language-*` 类的代码块会在构建时由 [textlane](https://textlane.dev) 进行高亮，它运行 VS Code 的 TextMate 语法和主题，输出与 Shiki 相同的标记。每个词法单元带有浅色主题的颜色，深色主题的颜色则放在 `--shiki-dark` 变量中，主题会随切换按钮和读者的设置使用它，因此代码颜色也会跟着切换，无需脚本，也不会闪烁。

## 配置

默认值与 Livemark 相同：

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

约 60 个内置主题中的任何一个都可以使用；可在 [Shiki playground](https://textmate-grammars-themes.netlify.app) 中查看。未知的名称会导致构建失败。代码块的边框、背景和字体仍来自 `styles/content.css`。

## 常用搭配

- `catppuccin-latte` / `catppuccin-mocha`（默认）
- `github-light` / `github-dark`
- `one-light` / `one-dark-pro`
- `solarized-light` / `solarized-dark`
- `rose-pine-dawn` / `rose-pine`
- `vitesse-light` / `vitesse-dark`

## 关于无障碍

无论给代码设置什么颜色，发布前都请用对比度工具逐一检查它们与代码块背景的对比度。常规尺寸文字所需的阈值为 4.5:1（WCAG AA）。`catppuccin-latte` 的绿色字符串在白色背景上达不到该阈值，因此 htmlpress 把它们从 `#40a02b` 加深为 `#2a7e16`，与 Livemark 的做法相同。

## 另请参阅

- [Code Blocks](/zh/authoring/code-blocks/)：编写方面的说明。
- [覆盖/弹出](/zh/customization/overriding-escaping/)：替换主题的代码样式或复制按钮脚本。