# Temas de sintaxis

> Elige temas claro y oscuro para los bloques de código.

Los bloques de código con una clase `language-*` se resaltan al compilar con [textlane](https://textlane.dev), que ejecuta las gramáticas y los temas TextMate de VS Code y produce el mismo marcado que Shiki. Cada token lleva el color del tema claro y el del oscuro como variable `--shiki-dark`, que el tema usa con el selector y la preferencia del lector, así que el código también cambia, sin scripts ni parpadeos.

## Configuración

Los valores predeterminados son los de Livemark:

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

Funciona cualquiera de los \~60 temas integrados; puedes verlos en el [playground de Shiki](https://textmate-grammars-themes.netlify.app). Un nombre desconocido hace fallar la compilación. El marco, el fondo y la fuente del bloque siguen viniendo de `styles/content.css`.

## Combinaciones populares

- `catppuccin-latte` / `catppuccin-mocha` (la predeterminada)
- `github-light` / `github-dark`
- `one-light` / `one-dark-pro`
- `solarized-light` / `solarized-dark`
- `rose-pine-dawn` / `rose-pine`
- `vitesse-light` / `vitesse-dark`

## Una nota sobre accesibilidad

Sean cuales sean los colores que des al código, comprueba cada uno contra el fondo del bloque de código con una herramienta de contraste antes de publicar. El umbral necesario para texto de tamaño normal es 4.5:1 (WCAG AA). Las cadenas verdes de `catppuccin-latte` no alcanzan ese umbral sobre blanco, así que htmlpress las oscurece de `#40a02b` a `#2a7e16`, como hace Livemark.

## Ver también

- [Code Blocks](/es/authoring/code-blocks/): la parte de redacción.
- [Sobrescritura/Escape](/es/customization/overriding-escaping/): reemplaza los estilos de código del tema o el script del botón de copiar.