Applies syntax highlighting colors to CodeBlock and any code component in the subtree. By default, code components use the theme-level syntax colors (set via defineTheme({ syntax: ... })), which derive from the palette (--color-text-accent for keywords, --color-text-green for strings, etc.). SyntaxTheme lets you override those per-region. The system uses 14 semantic tokens (keyword, string, comment, number, function, type, variable, operator, constant, tag, attribute, property, punctuation, background) validated against 11 community themes. Custom themes are created with defineSyntaxTheme() and can use [light, dark] tuples for automatic color-scheme adaptation. Built-in presets: oneDarkPro, dracula, monokai, nord, tokyoNight, catppuccinMocha, githubLight, githubDark, solarizedLight, oneLight (import from @astryxdesign/core/theme/syntax).
ts
| Guidance | Practices |
|---|---|
| Do | Use the syntax field in defineTheme() for app-wide code styling. Use SyntaxTheme only when a specific section needs a different look. |
| Do | Pick from built-in presets or create a custom theme with defineSyntaxTheme() for brand-specific colors. |
| Do | Syntax themes support light-dark() tuples: each token can have different values for light and dark mode, resolved automatically by the color scheme. |
| Don't | Wrap individual CodeBlock instances with SyntaxTheme: use the syntaxTheme prop on CodeBlock directly for per-instance overrides. |
Wrap a code block in SyntaxTheme to apply a dark syntax preset such as Dracula.
Use a light syntax preset for code examples that need to sit on light documentation surfaces.