Themes & dark mode

Colors live as oklch CSS tokens — base palette in app/assets/tailwind/application.css, preset themes in shadcnrb_themes.css. Components carry no inline dark: utilities; everything flips at the token layer.

How it works

• Dark mode — .dark { … } flips the tokens.
• Named themes — six preset palettes (blue, green, rose, violet, orange, plus neutral zinc) as .sui-theme-<name> classes overriding --color-primary, --color-primary-foreground, --color-ring.
• Combine — <html class="dark sui-theme-blue">.

Theme switcher

sui.theme_switcher is a dropdown that toggles both theme and mode, persisted in a cookie the server renders (or on your backend — see State persistence):

<html class="<%= sui.theme_class %>">   <%# renders the saved choice, no flash on reload %>
<%= sui.theme_switcher %>               <%# anywhere in your UI %>

Adding your own theme

Edit shadcnrb_themes.css:

.sui-theme-brand      { --color-primary: oklch(0.6 0.2 320);  /* … */ }
.dark.sui-theme-brand { --color-primary: oklch(0.75 0.18 320); /* … */ }

Then register the name with the switcher:

<%= sui.theme_switcher themes: %w[default blue green brand] %>

Keep theme rules limited to primary / ring tokens so background, border, and surface colors stay neutral across themes. Broader recolors belong in application.css.

Removing presets

Delete the @import "./shadcnrb_themes.css"; line in application.css (or delete the file outright) — the base neutral palette keeps working unchanged.