Themes

Themes map syntax captures, such as keyword or function.call, to colors and font styles. How you provide a theme depends on the package and HTML style mode.

Node.js, Python, and the CLI accept bundled theme IDs. Rust selects bundled themes through Cargo features and also supports TOML themes. In the browser, use a stylesheet for class output, a theme object for inline output, or your own CSS variables.

Choose a bundled theme

Choose an ID from the bundled theme catalog, or compare palettes in the playground. Use the examples below to find or apply a theme.

import { themes } from "@comfit/node";

console.log(themes());

import "@comfit/css/catppuccin-mocha.css";

const html = highlighter.renderHtml("const answer = 42;", "javascript", {
  preClass: "comfit-catppuccin-mocha",
});

for theme in comfit_themes::THEMES {
    println!("{}: {}", theme.id, theme.name);
}

let theme = comfit_themes::catppuccin_mocha::theme();

import comfit

print(comfit.themes())

import rehypeComfit from "@comfit/rehype";

const rehypePlugins = [
  [rehypeComfit, { theme: "catppuccin-mocha" }],
];

comfit ansi --list-themes

See HTML and CSS for stylesheet installation and layout.

Color nested brackets

Highlighting collects bracket depth by default. Visible bracket colors still need a palette: set rainbow on a theme, or define .rainbow-N classes or --comfit-rainbow-N variables.

Class and variable output can cycle bracket indices through a fixed number of colors. When rendering class-based HTML without a supplied theme, set the wrapping count to the palette size in the catalog so the indices match the available CSS classes.

These examples configure a six-color stylesheet such as Nord. The configuration alone does not load a stylesheet.

import { RenderHtmlConfig } from "@comfit/node";

const config = new RenderHtmlConfig();
config.rainbowColors = 6;

const html = highlighter.renderHtml("const answer = (42);", "javascript", {
  style: "class",
  rainbowColors: 6,
  preClass: "comfit-nord",
});

let config = comfit::RenderHtmlConfig {
    rainbow_colors: 6,
    ..Default::default()
};

import comfit

config = comfit.RenderHtmlConfig(rainbow_colors=6)

import rehypeComfit from "@comfit/rehype";

const rehypePlugins = [
  [rehypeComfit, { style: "class", rainbowColors: 6, preClass: "comfit-nord" }],
];

comfit html main.js --theme nord --style class --rainbow-colors 6

In class and inline modes, a nonempty supplied theme palette takes precedence. Bundled Catppuccin Mocha has no rainbow palette, so enabling bracket collection alone does not color its brackets.

Emphasize lines

Line numbers are one-based. These examples select line 2.

Pass the configuration to the corresponding highlight or render call.

import { RenderHtmlConfig } from "@comfit/node";

const config = new RenderHtmlConfig();
config.highlightedLines = [2];

const html = highlighter.renderHtml(
  "const answer = 42;\nconsole.log(answer);",
  "javascript",
  {
    highlightedLines: [2],
  },
);

let config = comfit::HighlightConfig {
    highlighted_lines: vec![2],
    ..Default::default()
};

import comfit

config = comfit.RenderHtmlConfig(highlighted_lines=[2])

import rehypeComfit from "@comfit/rehype";

const rehypePlugins = [
  [rehypeComfit, { highlightedLines: [2] }],
];

comfit html main.js --theme catppuccin-mocha --highlight-lines 2

Selecting a line marks it for emphasis without assigning a background color. Supply a theme line-highlight style, a .line-highlight CSS rule, or line-highlight variables. For full-width backgrounds, make the rendered line spans block-level.

To change themes without parsing or highlighting again, render an existing document result. To change line emphasis, highlight the document with a new line selection. This reuses cached highlighting when the source and rainbow option are unchanged.

Bundled themes

Every theme below is available as a bundled theme ID and an @comfit/css stylesheet. Follow the class-based HTML guide to load a stylesheet and match its outer class. Use the playground to compare palettes.

Appearance describes the theme's background. A stylesheet applies one palette and does not switch automatically with your site's light or dark mode.

Rainbow colors is the size of the bundled bracket palette. None means you need to supply a palette to color brackets.

The bundled themes do not define line-highlight styles. See Emphasize lines to make selected lines visible.

The playground supplements themes with fallback bracket and line-emphasis colors. The catalog describes the bundled theme files, without those additions.

Custom colors in the browser

With an initialized highlighter that has Rust loaded:

import type { Theme } from "@comfit/wasm";

const theme: Theme = {
  name: "Custom",
  default: { fg: "#cdd6f4", bg: "#1e1e2e" },
  styles: {
    keyword: { fg: "#cba6f7" },
    string: { fg: "#a6e3a1" },
    function: { fg: "#89b4fa" },
  },
  rainbow: ["#f38ba8", "#a6e3a1", "#89b4fa"],
  lineHighlight: { bg: "#313244" },
};

const html = highlighter.renderHtml("fn main() {}", "rust", {
  style: "inline",
  theme,
  highlightedLines: [1],
});

The theme option belongs to inline mode. Class and variables modes do not accept it in the browser API. Node.js and Python rendering functions accept bundled theme IDs, not this object.

Load a TOML theme in Rust

Save the theme as custom.toml, then load it using the Rust or CLI example below.

name = "Custom"
rainbow = ["#f38ba8", "#a6e3a1", "#89b4fa"]
line_highlight = { bg = "#313244" }

[default]
fg = "#cdd6f4"
bg = "#1e1e2e"

[styles]
keyword = { fg = "#cba6f7" }
string = { fg = "#a6e3a1" }
function = { fg = "#89b4fa" }

TOML uses line_highlight. Browser theme objects use lineHighlight. Dotted capture names such as "function.call" must be quoted as TOML keys.

Load the file in Rust or pass it to the CLI:

let source = std::fs::read_to_string("custom.toml")?;
let theme = comfit::Theme::from_toml(&source)?;

comfit ansi main.rs --theme-file custom.toml

Convert a VS Code theme

comfit convert vscode-theme.json --report-unmapped -o custom.toml
comfit ansi main.rs --theme-file custom.toml

The converter accepts JSON5 and resolves local include files relative to each theme file. It does not download parent themes.

Use --report-unmapped to report unsupported selectors. Review the converted palette before using it.