HTML Multi-Themes Formatter

One HTML block that supports multiple themes via CSS custom properties. Useful for light/dark mode.

Options

Runtime	Options
Rust	language, themes, default_theme, css_variable_prefix, pre_class, italic, include_highlights, rainbow_brackets, highlight_lines, header
Elixir	language, themes, default_theme, css_variable_prefix, pre_class, italic, include_highlights, rainbow_brackets, highlight_lines, header
JavaScript	language, themes, defaultTheme, cssVariablePrefix, preClass, italic, includeHighlights, rainbowBrackets, highlightLines, header
Java	Not currently supported in lumis4j
CLI	--themes, --default-theme, --css-variable-prefix, --pre-class, --italic, --include-highlights, --rainbow-brackets, --highlight-lines, --highlight-lines-class, --highlight-lines-style, --header-open, --header-close

Basic example

JavaScript

import {highlight} from '@lumis-sh/lumis'
import {htmlMultiThemes} from '@lumis-sh/lumis/formatters'
import javascript from '@lumis-sh/lumis/langs/javascript'
import latte from '@lumis-sh/themes/catppuccin_latte'
import frappe from '@lumis-sh/themes/catppuccin_frappe'

const html = await highlight(
  'const x = 1',
  htmlMultiThemes({
    language: javascript,
    themes: {light: latte, dark: frappe},
    defaultTheme: 'light-dark()',
  })
)

Rust

use lumis::{highlight, HtmlMultiThemesBuilder, languages::Language, themes};
use std::collections::HashMap;

let mut theme_map = HashMap::new();
theme_map.insert("light".to_string(), themes::get("catppuccin_latte").unwrap());
theme_map.insert("dark".to_string(), themes::get("catppuccin_frappe").unwrap());

let html = highlight(
    "const x = 1",
    HtmlMultiThemesBuilder::new()
        .language(Language::Javascript)
        .themes(theme_map)
        .default_theme("light-dark()")
        .build()
        .unwrap(),
);

Elixir

Lumis.highlight!(
  "const x = 1",
  formatter: {:html_multi_themes,
    language: "javascript",
    themes: [light: "catppuccin_latte", dark: "catppuccin_frappe"],
    default_theme: "light-dark()"
  }
)

Java

HTML Multi-Themes is not currently supported in lumis4j.

CLI

lumis highlight main.rs \
  --formatter html-multi-themes \
  --themes light:catppuccin_latte \
  --themes dark:catppuccin_frappe \
  --default-theme light-dark()

cssVariablePrefix

By default, CSS variables are prefixed with --lumis (e.g., --lumis-light, --lumis-dark-bg). Override the prefix if it conflicts with your CSS. Produces variables like --code-light, --code-dark-bg, etc.

JavaScript

const html = await highlight(
  'const x = 1',
  htmlMultiThemes({
    language: javascript,
    themes: {light: latte, dark: frappe},
    cssVariablePrefix: '--code',
  })
)

Rust

let formatter = HtmlMultiThemesBuilder::new()
    .language(Language::Javascript)
    .themes(theme_map)
    .css_variable_prefix("--code")
    .build()
    .unwrap();

let html = highlight("const x = 1", formatter);

Elixir

Lumis.highlight!(
  "const x = 1",
  formatter: {:html_multi_themes,
    language: "javascript",
    themes: [light: "catppuccin_latte", dark: "catppuccin_frappe"],
    css_variable_prefix: "--code"
  }
)

Java

HTML Multi-Themes is not currently supported in lumis4j.

CLI

lumis highlight index.js \
  --formatter html-multi-themes \
  --themes light:catppuccin_latte \
  --themes dark:catppuccin_frappe \
  --css-variable-prefix "--code"

defaultTheme

Controls what color values appear inline (not just as CSS variables):

Value	Behavior
omitted / null	CSS variables only, no inline colors
"light"	Inline colors from the light theme, CSS variables for all themes
"light-dark()"	Uses CSS light-dark() function for automatic OS-level switching

Output format

HTML Multi-Themes keeps the same HTML structure, but each token carries CSS variables for one or more themes:

<pre class="lumis" style="--lumis-light-bg:#eff1f5; --lumis-dark-bg:#303446;">
  <code class="language-javascript" translate="no" tabindex="0">
    <div class="l-line" data-line="1">
      <span style="--lumis-light:#8839ef; --lumis-dark:#ca9ee6; color: light-dark(var(--lumis-light), var(--lumis-dark));">const</span>
    </div>
  </code>
</pre>

• <pre class="lumis"> carries shared background and theme variables
• <code class="language-*"> identifies the language and keeps the block focusable
• <div class="l-line" data-line="N"> wraps each line
• <span style="--lumis-..."> carries per-theme token colors and font styles

Good uses

• light/dark mode
• user-selectable theme switching
• one HTML block shared across themes