Theming

Wabi ships 8 pre-built palettes. The gallery shows them side-by-side; this page covers how to switch and customize.

Switching themes in your app

bin/rails g wabi:theme rose

Overwrites app/assets/tailwind/wabi/tokens.css with the rose palette. Re-run bin/rails tailwindcss:build to recompile.

Available palettes

Default
Stone
Rose
Blue
Green
Violet
Yellow
Orange

Dark mode

Every palette has a dark variant. The wabi--theme Stimulus controller toggles data-mode on <html> and persists it in localStorage. To toggle in JS:

button(
  type: "button",
  data: { action: "click->wabi--theme#toggleMode" }
) { "Toggle dark mode" }

Customizing a palette

Tokens are CSS variables in HSL space. Edit app/assets/tailwind/wabi/tokens.css directly — components reference these variables, so any change propagates:

:root, [data-theme="default"] {
  --primary: 220 90% 56%;     /* your brand blue */
  --primary-foreground: 0 0% 100%;
  /* ... */
}

Notes on Tailwind 4

Wabi uses TW4 native @theme inline — no preset.js, no tailwind.config.js needed.
The dark: variant is wired via @custom-variant — fires when an ancestor has data-mode="dark", regardless of theme.
If Tailwind doesn't pick up your component classes, add @source "../../components/**/*.rb"; near the top of application.css.