Seven themes — or write your own.

Built-in theme gallery

Each card below is a real <aktion-app> running the same tiny program in a different theme. Click Try in preview to load that theme into the live preview further down the page.

Theme picker & live preview

Pick a theme — the preview below updates instantly. Want to test your own program? Expand the editor and paste it in.

Compare two themes

Pick any two themes and see the same content rendered side-by-side. The panes scroll in sync so it's easy to spot differences in spacing, radii, and surface contrast.

Customization studio

Tweak any token and watch the live preview update in real time. The studio remembers your edits in localStorage, so you can come back later and keep iterating. Copy the result as a setTheme() call, as raw CSS variables, or download the full JSON.

Use it from your app

Every option below hits the same code path — pick the one that fits your stack. Built-in names additionally set data-rui-theme on the host so the bundled stylesheet can layer on theme-specific tweaks (fonts, gradients, animations).

1. Built-in name (attribute)

<aktion-app theme="neon"></aktion-app>

2. JSON token map (attribute)

<aktion-app
  theme='{"colorPrimary":"#16a34a","radiusMd":"14px"}'>
</aktion-app>

3. Programmatic setTheme()

const el = document.querySelector("aktion-app");

el.setTheme("dark");

el.setTheme({
  colorPrimary: "#16a34a",
  colorPrimaryHover: "#15803d",
  colorBg: "#f0fdf4",
  radiusMd: "14px",
});

4. Host-page CSS variable override

aktion-app {
  --rui-color-primary: #16a34a;
  --rui-radius-md: 14px;
}

In-script theming with Theme({...})

An LLM can brand a single response without touching host code by assigning a Theme({...}) call to a reserved top-level identifier named theme. The runtime detects the binding, writes the tokens to the host as CSS custom properties, and reskins the rest of the rendered UI instantly.

theme = Theme({
  colors: {
    primary:      "#0969da",
    primaryHover: "#0860c7",
    accent:       "#1f883d"
  },
  font: {
    family:      "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
    weightBody:  "400"
  },
  radius: { button: "6px" }
})

_app_ = Stack([
  CardHeader("Welcome", subtitle: "Sign in to your workspace"),
  Buttons([Button("Sign in"), Button("Cancel", variant: "secondary")])
])

• Reserved name. Only theme (alongside _app_) is allowed without being referenced elsewhere. The runtime picks both up by name.
• Structured groups only. The top-level keys must be colors, radius, font, motion, elevation (plus the metadata keys name and direction). Flat-shape tokens (colorPrimary, radiusMd) and free-form CSS variables (--rui-color-x) raise a schema-validator warning and are dropped.
• Naming convention. Inside each group, camel-case keys flatten predictably: colors.primary → colorPrimary, colors.primaryHover → colorPrimaryHover, radius.md → radiusMd, radius.button → radiusButton, font.familyHeading → fontFamilyHeading.
• Partial maps. Pass only the groups you want to override — everything else inherits from the base theme set on the host (theme="light", theme="dark", …).
• Live updates. Streaming a different Theme({...}) block on the next render re-applies the override; the previous tokens are cleared first so themes never leak across responses.
• Host-side setTheme() uses flat tokens. The structured-only rule applies to the in-script Theme({...}) call. el.setTheme({...}) from the host (see below) takes the flat token names listed in the reference table.

Author a brand theme

Most brands need to override 4–6 tokens to feel native. Here's a minimal recipe; the studio above generates the same shape of object.

// brand-theme.js
export const brandTheme = {
  colorPrimary:      "#16a34a",
  colorPrimaryHover: "#15803d",
  colorBg:           "#f0fdf4",
  radiusMd:          "14px",
  chart1:            "#16a34a",
  chart2:            "#0ea5e9",
};

// app.js
import { brandTheme } from "./brand-theme.js";
const el = document.querySelector("aktion-app");
el.setTheme(brandTheme);

Use the Download JSON button in the studio above to export the tokens you just tweaked — the file drops straight into a JavaScript module like the one above.

Token reference

Every theme token, its corresponding CSS custom property, and what it affects. Use the search box to filter by name or description.