Theming

The components use Tailwind's own palette, with a dark: variant for every colour, so they follow your theme from the defaults onward.

Dark mode

Dark mode follows your app's dark variant, which is the visitor's system setting by default. To switch on a class or an attribute instead, redefine the variant. This browser uses data-theme:

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

Colours, radii and fonts

They come from your theme, so change them there and every component follows:

@theme {
  --color-neutral-900: oklch(0.21 0.03 265);
  --radius-md: 0.25rem;
}

Your own greys

Every grey the components draw, text, borders and surfaces alike, is a neutral shade, and Tailwind compiles each one to var(--color-neutral-…). Redefine the ramp in your @theme to change it everywhere, or on a wrapper to change it for what's inside:

.brand-greys {
  --color-neutral-50: oklch(98.5% 0.004 70);
  /* …every shade to 950 */
  --color-neutral-950: oklch(14.5% 0.012 70);
}

Redefine the whole ramp, since light and dark use different shades, and keep each shade's lightness so the components' text keeps its 4.5:1 contrast. The AI chat workspace shows it on a panel.

One component

Pass utilities through class:. The gem's rules sit in @layer components, which Tailwind orders before utilities, so yours win:

<%= card title: "Members", class: "rounded-none shadow-none" do %>…<% end %>

Form controls

Controls wear a class for their kind, which comes from a setting. Point it at your own classes, or return nil to leave controls unstyled:

config.control_class = ->(_view, kind) { kind == :select ? "form-select" : "form-input" }