Blocks

Theme Switcher

Pick a color palette and light/dark mode. Persists in localStorage. You'll see it live in the top-right of this page.

Usage

Add the init script in <head> to prevent FOUC, then place the switcher anywhere.

# In <head> — apply saved theme before the page paints
<%= sui.theme_switcher_init %>

# Anywhere in your UI
<%= sui.theme_switcher %>

Try it

The switcher in the header above is live. Change the theme, reload the page — your choice persists. Dark mode toggles independently.

live_example do
  sui.theme_switcher
end

How it works

Each theme is a CSS class like .theme-blue that overrides --color-primary / --color-primary-foreground / --color-ring on <html>. Dark mode is the same mechanism, just a .dark class. The two combine: <html class="theme-blue dark"> gives you blue-accented dark. Because every component uses semantic tokens (no inline bg-blue-500), components pick up the new values automatically.

Shipped themes

default — neutral zinc (the base palette)
blue
green
rose
violet
orange

All six ship in app/assets/tailwind/shadcnrb_themes.css, which application.css pulls in via @import "./shadcnrb_themes.css". Don't want presets? Delete the import line and ship only the neutral palette.

Adding your own theme

Open app/assets/tailwind/shadcnrb_themes.css.
Add a .theme-<name> rule and a .dark.theme-<name> pair.
Pass the name to the switcher via themes: — or skip that and use the class directly.

/* app/assets/tailwind/shadcnrb_themes.css */
.theme-brand {
  --color-primary: oklch(0.6 0.2 320);
  --color-primary-foreground: oklch(0.985 0 0);
  --color-ring: oklch(0.6 0.2 320);
}
.dark.theme-brand {
  --color-primary: oklch(0.75 0.18 320);
  --color-primary-foreground: oklch(0.145 0 0);
  --color-ring: oklch(0.75 0.18 320);
}

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

Themes only override --color-primary, --color-primary-foreground, and --color-ring. Keep it to those three so backgrounds/borders stay neutral and theme swaps don't touch surface colors. If you want broader recolors, edit the base application.css tokens instead.

API

Method	Key args	Description
theme_switcher	themes:, **opts	Dropdown with theme swatches + light/dark toggle
theme_switcher_init	—	Inline `<script>` tag; place in `<head>` to avoid FOUC