Global parameterization

Themes

Define complete semantic tokens at build time, then choose any compiled theme globally at runtime.

Try the included themes

Your choice is stored locally and applied before the page paints on your next visit.

Appearance

Vaylan Vaylan Dark

Theme workflow

1. Create

mix vaylan_ui.theme.new my-brand

2. Validate

mix vaylan_ui.theme.validate config/themes.exs

3. Build

mix vaylan_ui.theme.build --source config/themes.exs

Semantic tokens

Every theme supplies base surfaces, content pairs, brand colors, status colors, radii, field sizing, border, depth, and noise. Components never depend on a fixed palette.

VaylanUI.Theme.new!(%{
  name: "my-brand",
  color_scheme: "light",
  primary: "oklch(55% 0.19 265)",
  primary_content: "oklch(98% 0.01 255)",
  # all remaining semantic and shape tokens are required
})