Create Theme

Import Rules

Prerequisites

• Command: pnpm create:theme <theme-name>
• Preset Location: core/templates/contents/themes/starter/
• Output Location: themes/<theme-name>/

Step 1: Gather Requirements

Before creating ANY theme, collect:

Required Information:
1. Theme name (lowercase, hyphenated slug)
2. Display name (human-readable)
3. Description (purpose of the theme)
4. Author (team or individual)
5. Primary use case (SaaS type, industry, features)
6. Color preferences (optional - can use defaults)

Step 2: Create Theme from Preset

Basic Usage

pnpm create:theme <theme-name>

With Options

pnpm create:theme <theme-name> \
  --description "Theme description" \
  --author "Author Name" \
  --display-name "Display Name"

Example

pnpm create:theme project-manager \
  --description "Project management SaaS application" \
  --author "Development Team" \
  --display-name "Project Manager"

Step 3: Theme Structure Created

contents/themes/<theme-name>/
├── config/
│   ├── theme.config.ts         # Visual configuration
│   ├── app.config.ts           # Application overrides
│   ├── dashboard.config.ts     # Dashboard settings
│   └── permissions.config.ts   # Permission overrides
├── about.md                    # Theme description
├── styles/
│   ├── globals.css             # CSS variables
│   └── components.css          # Component overrides
├── messages/
│   ├── en.json                 # English translations
│   └── es.json                 # Spanish translations
├── migrations/
│   ├── README.md               # Migration docs
│   └── 001_example_schema.sql
├── docs/01-overview/
│   ├── 01-introduction.md
│   └── 02-customization.md
├── blocks/hero/                # Example hero block
├── entities/                   # Data entities (optional)
│   └── [entity]/               # Each entity has 4 required files
│       ├── [entity].config.ts
│       ├── [entity].fields.ts
│       ├── [entity].types.ts
│       ├── [entity].service.ts
│       └── messages/
├── templates/                  # Page overrides
├── public/brand/               # Brand assets
└── tests/                      # Theme tests

Step 4: Customize Configuration

4.1 theme.config.ts - Visual Identity