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.theme-<name>classes overriding--color-primary,--color-primary-foreground,--color-ring. - Combine —
<html class="dark theme-blue">.
Theme switcher
sui.theme_switcher is a dropdown that toggles both
theme and mode, persisted in localStorage:
<%= sui.theme_switcher_init %> <%# in <head>, prevents FOUC on reload %> <%= sui.theme_switcher %> <%# anywhere in your UI %>
Adding your own theme
Edit shadcnrb_themes.css:
.theme-brand { --color-primary: oklch(0.6 0.2 320); /* … */ } .dark.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.