Custom Themes

Last updated on

Each look is a CSS file. The Lua config only picks an id and an accent. Copy a built-in theme, rename the selector, then restyle the prompt group.

Built-in ids: modern, minimal, light, retro, cyber, vice, noir, industrial, fantasy. Same system as Interact.

[data-theme="ember"] {
  --primary: 232, 96, 48;
  --on-accent: 8, 11, 16;
  --text: 236, 241, 247;
}

config.theme = 'ember'

config.themeColors = {
    ember = { 232, 96, 48, 255 },
}

http://127.0.0.1:8080/?theme=ember

Markup

The HTML does not change. Themes only restyle these nodes:

#hud
  .slot[data-pos]
    .group                      prompt bar
      .item                     one prompt
        .hold-prefix            localized "Hold" when holdTime is set
        .icons
          img.icon
          .icon-fallback        used when no image is found
          .icon-plus
        .label
        .hold                   only when the prompt has holdTime
          .hold-fill            width is set in JS (0–100%)
      .sep                      between items

Custom positions mount .group directly on #hud with data-position="custom".

States

Do not add :hover or :active on items. They are never clicked.

Tokens

Color tokens are RGB triplets, not rgb() values, so both rgb(var(--primary)) and rgba(var(--primary), 0.2) work. Server themeColors / setColor write --primary the same way.

--on-accent should contrast with --primary. Light accents need a dark --on-accent; dark accents need a light one. JS will recompute --on-accent when themeColor or setColor is applied.

Root font-size is 1vh, so 1rem is 1% of the viewport height. Size the group and icons in rem, not px.

Do not use backdrop-filter. It cannot see GTA and paints black. Panels are black at --panel-a with a white hairline.

What to style

Copy web/themes/modern.css or web/themes/minimal.css and rename [data-theme="..."]. At minimum, cover:

1. .group — padding, border, background, radius, shadow
2. .label — size, weight, tracking
3. .item.is-active .label — put --primary here, not on every idle label
4. .hold-fill — JS only changes width. Leave .hold transparent so only the fill shows
5. .icon-fallback — the letter key used when an icon image is missing

.group layout, slots, and enter/leave animation live in style.css. Keep those in the base sheet.

Do not fill .item.is-active with a background. Hold state is the progress bar plus the label color.

Starter

[data-theme="ember"] {
  --ink: 12, 8, 6;
  --surface: 22, 14, 12;
  --text: 255, 236, 228;
  --text-muted: 196, 150, 132;
  --hairline: 232, 96, 48;
  --hairline-a: 0.4;
  --primary: 232, 96, 48;
  --on-accent: 12, 8, 6;
  --font: "DINPRO", "Segoe UI", sans-serif;
  --panel-a: 0.84;
}

[data-theme="ember"] body {
  font-family: var(--font);
  color: rgb(var(--text));
}

[data-theme="ember"] .group {
  padding: 0.85rem 1.05rem;
  border: 0.12rem solid rgba(var(--hairline), 0.7);
  border-radius: 0.7rem;
  background: rgba(var(--surface), var(--panel-a));
}

[data-theme="ember"] .label {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-theme="ember"] .item.is-active .label {
  color: rgb(var(--primary));
}

[data-theme="ember"] .icon-fallback {
  border: 0.1rem solid rgba(var(--hairline), 0.55);
  border-radius: 0.4rem;
  background: rgba(var(--ink), 0.55);
  color: rgb(var(--text));
}

[data-theme="ember"] .hold-fill {
  background: rgb(var(--primary));
}

@media (prefers-reduced-transparency: reduce) {
  [data-theme="ember"] {
    --panel-a: 1;
  }
}

DINPRO is self-hosted in web/fonts/. To use another face, add an @font-face in your theme file and set --font.