Skip to main content

Theme Development: Getting Started

Create custom themes for LusterCMS.

Theme Structure​

themes/my-theme/
├── theme.json           # Theme manifest
├── styles/
│   └── main.css         # Custom styles
├── blocks/
│   └── hero.css         # Block-specific styles
├── layouts/
│   └── default.json     # Page templates
└── assets/
    ├── images/
    └── fonts/

Theme Manifest​

{
  "name": "my-theme",
  "version": "1.0.0",
  "description": "A beautiful theme",
  "author": "Your Name",
  "preview": "preview.png",
  "settings": {
    "colors": {
      "primary": "#8b5cf6",
      "secondary": "#0ea5e9",
      "background": "#ffffff",
      "text": "#1f2937"
    },
    "typography": {
      "headingFont": "Inter",
      "bodyFont": "Inter",
      "baseFontSize": "16px"
    },
    "spacing": {
      "sectionPadding": "4rem"
    }
  }
}

Creating a Theme​

Step 1: Create Directory​

mkdir -p themes/my-theme
cd themes/my-theme

Step 2: Create Manifest​

Create theme.json with your settings.

Step 3: Add Styles​

/* styles/main.css */
:root {
  --color-primary: var(--theme-primary, #8b5cf6);
  --color-secondary: var(--theme-secondary, #0ea5e9);
}

.hero-section {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

Step 4: Test Theme​

  1. Go to Themes in admin
  2. Find your theme
  3. Click Preview
  4. Activate if satisfied

Next Steps​