Theming

Customize the RailsPress admin interface using CSS custom properties.

Quick Start

Override CSS variables in your application stylesheet after loading RailsPress styles:

app/assets/stylesheets/railspress_overrides.css

:root {
  --rp-primary: #2563eb;
  --rp-sidebar-bg: #1e293b;
}

Color Variables

Brand Colors

Variable	Default	Description
`--rp-primary`	`#2563eb`	Primary action color (buttons, links)
`--rp-primary-hover`	`#1d4ed8`	Primary hover state
`--rp-primary-light`	`#dbeafe`	Primary background tint

Semantic Colors

Variable	Default	Description
`--rp-success`	`#16a34a`	Success states, published badges
`--rp-warning`	`#ca8a04`	Warning states, draft badges
`--rp-danger`	`#dc2626`	Error states, delete buttons
`--rp-info`	`#0891b2`	Informational elements

Background Colors

Variable	Default	Description
`--rp-bg`	`#f8fafc`	Page background
`--rp-bg-card`	`#ffffff`	Card/panel background
`--rp-bg-muted`	`#f1f5f9`	Muted/secondary backgrounds

Text Colors

Variable	Default	Description
`--rp-text`	`#1e293b`	Primary text
`--rp-text-muted`	`#64748b`	Secondary/muted text
`--rp-text-light`	`#94a3b8`	Light text (placeholders)

Variable	Default	Description
`--rp-sidebar-bg`	`#1e293b`	Sidebar background
`--rp-sidebar-text`	`#e2e8f0`	Sidebar text color
`--rp-sidebar-hover`	`#334155`	Sidebar item hover
`--rp-sidebar-active`	`#0f172a`	Active sidebar item
`--rp-sidebar-width`	`260px`	Sidebar width

Typography Variables

Variable	Default	Description
`--rp-font-display`	`system-ui, sans-serif`	Headings font
`--rp-font-body`	`system-ui, sans-serif`	Body text font
`--rp-font-mono`	`ui-monospace, monospace`	Code/mono font
`--rp-font-size-base`	`1rem`	Base font size

Component Variables

Buttons

Variable	Default	Description
`--rp-btn-radius`	`0.375rem`	Button border radius
`--rp-btn-padding-x`	`1rem`	Horizontal padding
`--rp-btn-padding-y`	`0.5rem`	Vertical padding

Cards

Variable	Default	Description
`--rp-card-radius`	`0.5rem`	Card border radius
`--rp-card-shadow`	`0 1px 3px rgba(0,0,0,0.1)`	Card shadow
`--rp-card-padding`	`1.5rem`	Card internal padding

Forms

Variable	Default	Description
`--rp-input-radius`	`0.375rem`	Input border radius
`--rp-input-border`	`1px solid var(--rp-border)`	Input border
`--rp-input-focus-ring`	`0 0 0 3px var(--rp-primary-light)`	Focus ring

Theme Examples

Dark Sidebar with Blue Primary

CSS

:root {
  --rp-primary: #3b82f6;
  --rp-primary-hover: #2563eb;
  --rp-primary-light: #dbeafe;

  --rp-sidebar-bg: #0f172a;
  --rp-sidebar-text: #f1f5f9;
  --rp-sidebar-hover: #1e293b;
  --rp-sidebar-active: #1e40af;
}

Light Theme with Green Accent

CSS

:root {
  --rp-primary: #059669;
  --rp-primary-hover: #047857;
  --rp-primary-light: #d1fae5;

  --rp-sidebar-bg: #f8fafc;
  --rp-sidebar-text: #1e293b;
  --rp-sidebar-hover: #e2e8f0;
  --rp-sidebar-active: #dcfce7;
}

Purple/Indigo Theme

CSS

:root {
  --rp-primary: #7c3aed;
  --rp-primary-hover: #6d28d9;
  --rp-primary-light: #ede9fe;

  --rp-sidebar-bg: #1e1b4b;
  --rp-sidebar-text: #e0e7ff;
  --rp-sidebar-hover: #312e81;
  --rp-sidebar-active: #4338ca;
}

Dynamic Theming

For multi-tenant applications, set variables dynamically in your layout:

app/views/layouts/railspress/admin.html.erb

<!DOCTYPE html>
<html>
<head>
  <%= csrf_meta_tags %>
  <%= stylesheet_link_tag "railspress/admin" %>

  <style>
    :root {
      --rp-primary: <%= current_organization.primary_color || '#2563eb' %>;
      --rp-sidebar-bg: <%= current_organization.sidebar_color || '#1e293b' %>;
    }
  </style>
</head>
<body class="rp-admin">
  <!-- ... -->
</body>
</html>

BEM Naming Convention

RailsPress uses BEM-style CSS class naming with the rp- prefix:

Block: .rp-card, .rp-form, .rp-sidebar
Element: .rp-card__header, .rp-form__actions
Modifier: .rp-btn--primary, .rp-badge--success