Theming

Identical JSON, three looks. Consumers own the look: override --baht-* tokens for the quick wins, or target the frozen .baht-* classes for anything deeper (light DOM — your CSS reaches every node).

Default tokens

“Bank” theme (token overrides)

“Terminal” theme (tokens + class overrides)

How the bank theme is done

.theme-bank {
  --baht-color-primary: #047857;
  --baht-color-border: #a7f3d0;
  --baht-color-surface: #ecfdf5;
  --baht-radius: 12px;
  --baht-control-height: 42px;
  --baht-font-family: Georgia, serif;
}

How the banknote themes are wired

Pick a banknote up in the corner — the whole site and this snippet swap together. That is all “CSS on the fly” is: override the raw scale on a scope and every semantic token derives from it. Active now: ฿20.