Theme Kit includes a dedicated code token group for syntax highlighting. Every token maps to a --theme-code-* CSS variable that Shiki (or any highlighter) can consume directly — so your code blocks re-theme automatically when the user switches themes, families, or modes.

1Define code tokens in your theme

All 22 code tokens live under tokens.code and resolve alongside colors, spacing, typography, etc.

1import { defineTheme } from "@theme-kit/core";
2
3const brand = defineTheme({
4  name: "brand-dark",
5  meta: { family: "brand", mode: "dark" },
6  tokens: {
7    colors: {
8      background: "#0d1117",
9      foreground: "#e6edf3",
10      primary: "#58a6ff",
11      primaryForeground: "#0d1117",
12      // ... other semantic colors
13    },
14    typography: {
15      fontFamilies: { mono: "JetBrains Mono, ui-monospace, monospace" },
16    },
17    code: {
18      background: "#161b22",
19      foreground: "#e6edf3",
20      comment: "#8b949e",
21      keyword: "#ff7b72",
22      string: "#a5d6ff",
23      number: "#79c0ff",
24      function: "#d2a8ff",
25      variable: "#e6edf3",
26      type: "#ffa657",
27      property: "#79c0ff",
28      operator: "#ff7b72",
29      punctuation: "#8b949e",
30      tag: "#ff7b72",
31      attribute: "#79c0ff",
32      lineNumber: "#484f58",
33      selection: "rgba(88, 166, 255, 0.3)",
34      highlight: "rgba(255, 255, 255, 0.08)",
35      gutter: "#161b22",
36    },
37  },
38});

These tokens produce CSS variables like --theme-code-background,--theme-code-keyword,--theme-code-string, and so on — ready for any syntax highlighter.

2Code token reference

Complete reference of every code token, its purpose, and the CSS variable it produces.

Token	CSS Variable	Purpose	Fallback
`background`	`--theme-code-background`	Code block background	muted / background mix
`foreground`	`--theme-code-foreground`	Default text color in code	foreground
`comment`	`--theme-code-comment`	Comments, docstrings	foreground @ 55%
`keyword`	`--theme-code-keyword`	Keywords, control flow, storage	primary
`string`	`--theme-code-string`	String literals, templates	primary + green mix
`number`	`--theme-code-number`	Numeric literals	primary + orange mix
`function`	`--theme-code-function`	Function/method names	primary + blue mix
`variable`	`--theme-code-variable`	Variables, parameters	foreground
`type`	`--theme-code-type`	Types, classes, interfaces	primary + purple mix
`property`	`--theme-code-property`	Object properties	foreground + primary mix
`operator`	`--theme-code-operator`	Operators, punctuation	foreground + primary mix
`punctuation`	`--theme-code-punctuation`	Brackets, commas, semicolons	foreground @ 70%
`tag`	`--theme-code-tag`	HTML/JSX/Vue/Astro tag names	primary + pink mix
`attribute`	`--theme-code-attribute`	Attribute names in markup	foreground + primary mix
`lineNumber`	`--theme-code-line-number`	Line number gutter color	muted-foreground
`selection`	`--theme-code-selection`	Text selection background	primary @ 30%
`highlight`	`--theme-code-highlight`	Highlighted line background	white @ 8%
`gutter`	`--theme-code-gutter`	Line number gutter background	code background
`border`	`--theme-code-border`	Code block border color	border

3Enable code tokens in your app

Map theme code tokens to your syntax highlighter's CSS variables.

The docs app uses Shiki with a custom theme that reads --theme-code-*variables. Here's the pattern to connect any highlighter:

1/* In your global CSS — these map to --theme-code-* variables */
2.code-block {
3  /* These become --tk-syntax-* variables used by Shiki */
4  --tk-code-bg: var(--theme-code-background, var(--theme-color-muted));
5  --tk-syntax-plain: var(--theme-code-foreground, var(--theme-color-foreground));
6  --tk-syntax-comment: var(--theme-code-comment, color-mix(...));
7  --tk-syntax-keyword: var(--theme-code-keyword, var(--theme-color-primary));
8  --tk-syntax-string: var(--theme-code-string, color-mix(...));
9  --tk-syntax-number: var(--theme-code-number, color-mix(...));
10  --tk-syntax-function: var(--theme-code-function, color-mix(...));
11  --tk-syntax-type: var(--theme-code-type, color-mix(...));
12  --tk-syntax-tag: var(--theme-code-tag, color-mix(...));
13  --tk-syntax-attr: var(--theme-code-attribute, color-mix(...));
14  --tk-syntax-variable: var(--theme-code-variable, var(--theme-color-foreground));
15  --tk-syntax-property: var(--theme-code-property, color-mix(...));
16  --tk-syntax-operator: var(--theme-code-operator, color-mix(...));
17  --tk-syntax-punctuation: var(--theme-code-punctuation, color-mix(...));
18  --tk-syntax-diff-add: var(--theme-code-line-number, color-mix(...));
19  --tk-syntax-diff-remove: var(--theme-code-selection, color-mix(...));
20  --tk-syntax-danger: var(--theme-code-highlight, var(--theme-color-destructive));
21}

4Best practices

Practical tips for working with code tokens.

Define both light and dark variants

Code tokens should adapt to the theme mode. A dark theme needs a dark code background (#161b22), while a light theme needs a light one (#f6f8fa). Use extendThemeto share the base and override just the code group:

typescript

1const base = defineTheme({
2  name: "base",
3  tokens: {
4    code: {
5      comment: "#6a737d",
6      keyword: "#d73a49",
7      string: "#032f62",
8      // ...shared tokens
9    },
10  },
11});
12
13const light = extendTheme("brand-light", base, {
14  meta: { mode: "light" },
15  tokens: {
16    code: {
17      background: "#f6f8fa",
18      foreground: "#24292e",
19      selection: "rgba(0, 0, 0, 0.1)",
20    },
21  },
22});
23
24const dark = extendTheme("brand-dark", base, {
25  meta: { mode: "dark" },
26  tokens: {
27    code: {
28      background: "#161b22",
29      foreground: "#e6edf3",
30      selection: "rgba(88, 166, 255, 0.3)",
31    },
32  },
33});

Use semantic fallbacks in CSS

Always provide fallbacks using semantic color tokens so code blocks stay readable even if a theme doesn't define code tokens:

css

1.code-block {
2  --tk-code-bg: var(--theme-code-background, var(--theme-color-muted));
3  --tk-syntax-plain: var(--theme-code-foreground, var(--theme-color-foreground));
4  --tk-syntax-comment: var(--theme-code-comment, color-mix(in srgb, var(--theme-color-foreground) 55%, transparent));
5  --tk-syntax-keyword: var(--theme-code-keyword, var(--theme-color-primary));
6  /* ... */
7}

Generate from a seed color

Use generateTheme to create a complete theme pair (including harmonized code tokens) from a single brand color:

typescript

1import { generateTheme } from "@theme-kit/core";
2
3const { light, dark } = generateTheme({
4  seed: "#6366f1",      // Your brand color
5  family: "brand",      // Family name
6  // Code tokens are auto-generated with WCAG-compliant contrast
7});

5Go deeper

Tokens are the input — here's what consumes them.

Semantic Tokens & Typography

Colors, spacing, radius, shadows, typography — the full token system.

→

Custom Themes

defineTheme, extendTheme, composeTheme and the generation studio.

→

Framework Guides

Full integration guides for React, Next, Vue, Svelte, Solid, Angular, Web, Astro.

→