Multi-Theme Mode

Multi-theme mode tokenizes code once and resolves colors from multiple themes. The default theme emits inline styles. Other themes emit CSS variables. Multi-theme is available in CodeToHTML, CodeToTokens, and CodeToJSON. The other output formats (CodeToANSI, CodeToSVG, CodeToPlainText) operate in single-theme mode only.

Enable multi-theme

Pass a Themes map instead of a single Theme:

1
html, err := h.CodeToHTML(ctx, code, nuri.CodeToHTMLOptions{
2
  Lang: "typescript",
3
  Themes: map[string]string{
4
    "dark":  "github-dark",
5
    "light": "github-light",
6
  },
7
})

The lexicographically first key ("dark") becomes the default theme with inline color: styles. The "light" theme produces --nuri-light CSS variables on each token.

Output:

1
<pre class="nuri nuri-themes dark light"
2
     style="background-color:#24292e;color:#e1e4e8;--nuri-light:#fff;--nuri-light-bg:#24292e"
3
     tabindex="0">
4
  <code>
5
    <span class="line">
6
      <span style="color:#F97583;--nuri-light:#D73A49">const</span>
7
      <span style="color:#E1E4E8;--nuri-light:#24292E"> x </span>
8
      ...
9
    </span>
10
  </code>
11
</pre>

CSS variable naming

Variables follow the pattern --nuri-{key}:

On token <span> elements:

Variable	Purpose
`--nuri-{key}`	Foreground color
`--nuri-{key}-bg`	Background color
`--nuri-{key}-font-style`	`italic`
`--nuri-{key}-font-weight`	`bold`
`--nuri-{key}-text-decoration`	`underline`, `line-through`

On the <pre> element:

Variable	Purpose
`--nuri-{key}`	Theme default foreground
`--nuri-{key}-bg`	Theme default background

Switch themes with CSS

Apply the non-default theme by reading its CSS variables. For a class-based toggle:

1
html.light .nuri,
2
html.light .nuri span {
3
  color: var(--nuri-light) !important;
4
  background-color: var(--nuri-light-bg) !important;
5
  font-style: var(--nuri-light-font-style) !important;
6
  font-weight: var(--nuri-light-font-weight) !important;
7
  text-decoration: var(--nuri-light-text-decoration) !important;
8
}

For automatic switching based on system preference:

1
@media (prefers-color-scheme: light) {
2
  .nuri,
3
  .nuri span {
4
    color: var(--nuri-light) !important;
5
    background-color: var(--nuri-light-bg) !important;
6
    font-style: var(--nuri-light-font-style) !important;
7
    font-weight: var(--nuri-light-font-weight) !important;
8
    text-decoration: var(--nuri-light-text-decoration) !important;
9
  }
10
}

Suppress inline styles

DefaultColor controls whether the default theme emits inline color: and background-color: properties:

1
f := false
2
html, err := h.CodeToHTML(ctx, code, nuri.CodeToHTMLOptions{
3
  Lang: "go",
4
  Themes: map[string]string{
5
    "dark":  "github-dark",
6
    "light": "github-light",
7
  },
8
  DefaultColor: &f,
9
})

Value	Behavior
`nil` (default)	Inline styles for the default theme, CSS variables for others
`&true`	Same as `nil`
`&false`	CSS variables only; no inline `color:` or `background-color:` on any element

Set DefaultColor to &false when both themes are activated through CSS variables and neither needs inline styles.

Multi-theme token data

h.CodeToTokens() also supports multi-theme. The TokensResult exposes per-theme colors:

1
result, err := h.CodeToTokens(ctx, code, nuri.CodeToTokensOptions{
2
  Lang: "go",
3
  Themes: map[string]string{
4
    "dark":  "github-dark",
5
    "light": "github-light",
6
  },
7
})
8
9
fmt.Println(result.FG)         // default theme foreground
10
fmt.Println(result.BG)         // default theme background
11
fmt.Println(result.ThemeFG)    // map["light"] → foreground
12
fmt.Println(result.ThemeBG)    // map["light"] → background
13
fmt.Println(result.ThemeNames) // ["dark", "light"]

Field	Type	Description
`FG`, `BG`	`string`	Default theme colors
`ThemeFG`, `ThemeBG`	`map[string]string`	Non-default theme colors (keyed by theme key)
`ThemeNames`	`[]string`	All theme keys, sorted
`Tokens[i][j].ThemeStyles`	`map[string]TokenStyle`	Per-token styles for non-default themes

The default theme's per-token style lives in ThemedToken.Color, ThemedToken.BgColor, and ThemedToken.FontStyle. Non-default themes live in ThemedToken.ThemeStyles.

Next steps

Output Formats for ANSI, SVG, JSON, plain text, and raw tokens
Style-to-Class Mode to replace inline styles with class names