Colors

layered-ui-rails supports a two-tier color customisation system.

Set a single accent color for quick branding, or override any of the individual color tokens for full control.

Getting started

Run the install generator to create the overrides file:

bin/rails generate layered:ui:install

This creates app/assets/tailwind/layered_ui_overrides.css with all variables commented out. The file is not overwritten on subsequent runs, so your changes are preserved.

Tier 1 - Accent color

Set --accent and --accent-foreground in your overrides file. Primary buttons, active tabs, and active navigation items all inherit from these two variables.

/* layered_ui_overrides.css */

:root {
  --accent: oklch(0.58 0.19 255);
  --accent-foreground: oklch(1 0 0);
}

.dark {
  --accent: oklch(0.72 0.14 255);
  --accent-foreground: oklch(0.2 0 0);
}

Affected elements

The following elements respond to the accent color:

• Primary buttons (l-ui-button--primary)
• Active tab indicators (l-ui-tabs__tab--active)
• Active navigation items (l-ui-navigation__item--active)
• Panel toggle button (l-ui-panel__button)
• Sent message bubbles (l-ui-message--sent)
• Scroll-to-bottom button (l-ui-scroll-to-bottom)

If your accent color needs a different text/icon color on buttons (e.g. a pink accent with white button text in dark mode), override --button-primary-text in Tier 2. To recolor only the icon while leaving button text unchanged, override --button-primary-icon instead.

Tier 2 - Full color overrides

Override any individual design token for complete control. Uncomment only the variables you need in your overrides file. Values are full CSS colors - oklch() is recommended for perceptually uniform mixing and consistent contrast, but #hex, rgb(), and keywords also work.

When setting custom colors, check that text, controls, and states still meet WCAG 2.2 AA. See the WCAG 2.2 quick reference for guidance.

/* layered_ui_overrides.css */

:root {
  --accent: oklch(0.58 0.19 255);
  --accent-foreground: oklch(1 0 0);
  --background: oklch(0.99 0.005 255);
  --surface: oklch(0.95 0.01 255);
}

.dark {
  --accent: oklch(0.72 0.14 255);
  --accent-foreground: oklch(0.2 0 0);
  --background: oklch(0.07 0.015 255);
  --surface: oklch(0.12 0.015 255);
}

Dynamic theming

Override tokens per request (e.g. per-tenant branding) using content_for :l_ui_head. See the head page for usage and CSP compatibility notes.

Design tokens