Usage
Reads syntax colors for a canvas or other drawing that cannot use the CSS variables SyntaxTheme sets. Call it under a SyntaxTheme. It returns null when that provider is absent, so the caller can skip drawing.
ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Render the drawing under the same SyntaxTheme that colors the surrounding code. |
| Do | Check for null before reading token. The hook returns null with no SyntaxTheme above it. |
| Don't | Copy syntax colors into the canvas by hand. They drift from the active syntax theme. |
Returns
| Field | Type | Description |
|---|---|---|
| name | string | Name of the syntax theme from the nearest SyntaxTheme. |
| mode | 'light' | 'dark' | The mode used to resolve tokens. The contract is the nearest Theme's effective mode. The hook currently reads prefers-color-scheme instead, so under a Theme with a forced mode these colors can differ from the code around them. |
| token | (name: ) => string | The CSS color for one syntax token in the current mode, such as keyword. |
| tokens | Record<, string> | Every syntax token resolved for the current mode. |
Examples
Common configurations, variations, and states.The word const painted with the keyword color from useSyntaxTheme, inside the GitHub Light syntax theme.
Use with shadcn
Already using the shadcn registry workflow? Install the real Astryx package and a local public re-export. Component implementation source stays in Astryx.
This install URL expires with the draft preview.bash