Syntax Theme @astryx-svelte/core v0.3.0 · theme
Usage
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 @astryx-svelte/core/theme/syntax).ts
Best practices
| 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. |
| Do | For a single CodeBlock, pass the syntaxTheme prop directly: it is shorthand for wrapping that block in SyntaxTheme. Use the SyntaxTheme wrapper when theming a whole region of code components. |
Examples
Common configurations, variations, and states.SyntaxTheme — Dark Preset
Wrap a code block in SyntaxTheme to apply a dark syntax preset such as Dracula.
SyntaxTheme — Light Preset
Use a light syntax preset for code examples that need to sit on light documentation surfaces.