OpeNext CMS · Developer Docs

Theme Builder

Customize site-wide appearance — colors, typography, spacing, shadows, and component variants — per tenant.

Overview

The Theme Builder is a core dashboard feature. Tenants customize appearance without touching code. The active theme drives the live public site through CSS custom properties.

System themes

Five built-in themes ship with every fresh tenant database:

  • Startup (default)
  • Agency
  • Corporate
  • Ecommerce
  • Portfolio

System themes are read-only — duplicate one to create an editable copy.

CSS token groups

  • Colors: primary, secondary, accent, background, surface, text, muted, status colors
  • Typography: heading font, body font, base size, line height
  • Spacing: xs–xl scale and section spacing
  • Radius and shadows: sm, md, lg, xl
  • Layout: max width and container padding

Component variants

Variants are visual presets for section families (navbar, hero, features, CTA, pricing, testimonials, footer). They map to existing UI components — not separate block types.

Full guide on GitHub

For architecture details, seeding, RBAC, and API routes, read the complete guide in the repository:

theme-builder.md on GitHub →

To upload a full React/TSX theme package (Theme Engine ZIP), see the Theme Upload guide.