CSS Builder

Lumis ships one CSS file per theme. The CSS builder lets you scope selectors, change the container selector, and add container styles.

The builder works with the same theme data as the bundled files. With no options, it produces the same CSS shape as @lumis-sh/themes/css/<theme>.css.

Options

JavaScript uses camelCase. Rust and Elixir use snake_case.

Option	Default	Use it for
scope	""	Parent selector prepended to every generated selector.
containerSelector / container_selector	".lumis"	Set the selector for the code block container rule.
containerStyle / container_style	none	Add declarations to the container selector. Use this for layout-related CSS such as padding, border-radius, or overflow-x. If a property already exists, the new value replaces it.
enableItalic / enable_italic	true	Drop italic declarations when set to false.

containerStyle / container_style is a list of (property, value) pairs. For example, background-color: var(--code-background) replaces the theme background, while padding: 1rem adds a new declaration.

Token selectors are fixed as l-* classes, matching the built-in htmlLinked formatter output. Line wrappers use l-line, and highlighted lines use l-highlighted by default.

Use all options together

JavaScript

import {buildCss} from '@lumis-sh/themes'
import dracula from '@lumis-sh/themes/dracula'

const css = buildCss(dracula, {
  scope: '.docs-theme',
  containerSelector: '.code-block',
  containerStyle: [
    ['background-color', 'var(--code-background)'],
    ['border-radius', '0.5rem'],
    ['padding', '1rem'],
  ],
  enableItalic: false,
})

Rust

use lumis::themes;

let theme = themes::get("dracula").unwrap();

let css = themes::CssBuilder::new(&theme)
    .scope(".docs-theme")
    .container_selector(".code-block")
    .container_style([
        ("background-color", "var(--code-background)"),
        ("border-radius", "0.5rem"),
        ("padding", "1rem"),
    ])
    .enable_italic(false)
    .build();

Elixir

css =
  Lumis.Theme.build_css!("dracula",
    scope: ".docs-theme",
    container_selector: ".code-block",
    container_style: [
      {"background-color", "var(--code-background)"},
      {"border-radius", "0.5rem"},
      {"padding", "1rem"}
    ],
    enable_italic: false
  )

The output starts like this:

/* dracula
 * revision: ae752c13e95fb7c5f58da4b5123cb804ea7568ee
 */
.docs-theme .code-block {
  color: #f8f8f2;
  background-color: var(--code-background);
  border-radius: 0.5rem;
  padding: 1rem;
}
.docs-theme .l-keyword {
  color: #ff79c6;
}

Default output

JavaScript

import {buildCss} from '@lumis-sh/themes'
import dracula from '@lumis-sh/themes/dracula'

const css = buildCss(dracula)

Rust

use lumis::themes;

let theme = themes::get("dracula").unwrap();
let css = themes::CssBuilder::new(&theme).build();

Elixir

css = Lumis.Theme.build_css!("dracula")

The output starts with the theme name and revision, then the container .lumis rule, then token rules:

/* dracula
 * revision: ae752c13e95fb7c5f58da4b5123cb804ea7568ee
 */
.lumis {
  color: #f8f8f2;
  background-color: #282a36;
}
.l-keyword {
  color: #ff79c6;
}
.l-string {
  color: #f1fa8c;
}

Scope a stylesheet

Use scope when the same page needs more than one theme, or when a code block should inherit theme styles only inside part of your app. Do not include a trailing space; Lumis inserts the descendant combinator for you.

JavaScript

import {buildCss} from '@lumis-sh/themes'
import githubDark from '@lumis-sh/themes/github_dark'

const css = buildCss(githubDark, {
  scope: 'html[data-theme="dark"]',
  containerStyle: [
    ['background-color', 'var(--code-background)'],
    ['border-radius', '0.375rem'],
    ['padding', '1rem'],
  ],
})

Rust

use lumis::themes;

let theme = themes::get("github_dark").unwrap();

let css = themes::CssBuilder::new(&theme)
    .scope("html[data-theme=\"dark\"]")
    .container_style([
        ("background-color", "var(--code-background)"),
        ("border-radius", "0.375rem"),
        ("padding", "1rem"),
    ])
    .build();

Elixir

css =
  Lumis.Theme.build_css!("github_dark",
    scope: ~s(html[data-theme="dark"]),
    container_style: [
      {"background-color", "var(--code-background)"},
      {"border-radius", "0.375rem"},
      {"padding", "1rem"}
    ]
  )

That produces selectors like this:

html[data-theme="dark"] .lumis {
  color: #e6edf3;
  background-color: var(--code-background);
  border-radius: 0.375rem;
  padding: 1rem;
}
html[data-theme="dark"] .l-keyword {
  color: #ff7b72;
}

Change the container selector

The container rule uses .lumis by default. Change it when your rendered HTML uses a different wrapper class.

JavaScript

const css = buildCss(dracula, {
  containerSelector: '.code-block',
})

Rust

let css = themes::CssBuilder::new(&theme)
    .container_selector(".code-block")
    .build();

Elixir

css = Lumis.Theme.build_css!("dracula", container_selector: ".code-block")

That changes only the container rule selector:

.code-block {
  color: #f8f8f2;
  background-color: #282a36;
}
.l-keyword {
  color: #ff79c6;
}

Other runtimes

Java and the CLI do not expose the CSS builder yet.