Skip to main content

Themes

Customize the look and feel of your site. LusterCMS themes control the visual appearance of your public-facing pages.

Theme System

What Themes Control

  • Colors — Primary, secondary, accent colors
  • Typography — Fonts, sizes, line heights
  • Spacing — Margins, padding, gaps
  • Components — Button styles, card designs
  • Layouts — Page templates, grids

Theme Structure

themes/
my-theme/
theme.json # Theme configuration
blocks/ # Custom block styles
layouts/ # Page templates
assets/ # Images, fonts

Using Themes

Browsing Themes

  1. Go to Themes in the sidebar
  2. Browse available themes
  3. Preview before activating
  4. Click Activate to apply

Theme Settings

Customize the active theme:

  1. Go to Themes → Editor
  2. Adjust colors, fonts, spacing
  3. Preview changes in real-time
  4. Save to apply

Available Settings

SettingOptions
Brand ColorsPrimary, secondary, accent
TypographyHeading font, body font, sizes
HeaderLogo, navigation style, sticky
FooterLayout, columns, social links
ButtonsStyle, radius, hover effects

Theme Marketplace

Find themes in the marketplace:

  • Free themes — Community-contributed
  • Premium themes — Professional designs
  • ThemeForest — Envato integration

Installing Themes

  1. Browse the marketplace
  2. Click Install on a theme
  3. Theme downloads automatically
  4. Activate when ready

Custom Themes

Create your own themes:

  1. Start from a base theme
  2. Customize settings
  3. Add custom CSS if needed
  4. Export for backup

See Theme Development for advanced customization.

Theme Settings in Blocks

Blocks automatically inherit theme settings:

  • Buttons use theme button styles
  • Text uses theme typography
  • Colors match theme palette

Override per-block when needed in the editor.


🎨 Developer?

Learn how to create custom themes in the Theme Development Guide.