Theme Structure

Detailed breakdown of theme files.

Directory Layout

themes/my-theme/
├── theme.json           # Required: Theme configuration
├── preview.png          # Theme preview image
├── styles/
│   ├── main.css         # Global styles
│   ├── variables.css    # CSS variables
│   └── utilities.css    # Utility classes
├── blocks/
│   ├── hero.css         # Hero block styles
│   ├── features.css     # Features block styles
│   └── footer.css       # Footer block styles
├── layouts/
│   ├── default.json     # Default page layout
│   └── landing.json     # Landing page layout
└── assets/
    ├── images/
    │   └── pattern.svg
    └── fonts/
        └── custom-font.woff2

theme.json Schema

{
  "name": "my-theme",
  "version": "1.0.0",
  "description": "Theme description",
  "author": "Author Name",
  "license": "MIT",
  "preview": "preview.png",
  "settings": {
    "colors": {
      "primary": "#8b5cf6",
      "secondary": "#0ea5e9",
      "accent": "#f59e0b",
      "background": "#ffffff",
      "surface": "#f3f4f6",
      "text": "#1f2937",
      "textMuted": "#6b7280"
    },
    "typography": {
      "headingFont": "Inter",
      "bodyFont": "Inter",
      "baseFontSize": "16px",
      "lineHeight": "1.6"
    },
    "spacing": {
      "sectionPadding": "4rem",
      "containerWidth": "1200px"
    },
    "borders": {
      "radius": "8px"
    }
  },
  "blocks": ["hero", "features", "pricing", "footer"]
}

CSS Variables

Themes expose CSS variables:

:root {
  --theme-primary: #8b5cf6;
  --theme-secondary: #0ea5e9;
  --theme-background: #ffffff;
  --theme-text: #1f2937;
  --theme-font-heading: 'Inter', sans-serif;
  --theme-font-body: 'Inter', sans-serif;
  --theme-radius: 8px;
}

Use in your styles:

.button {
  background: var(--theme-primary);
  border-radius: var(--theme-radius);
  font-family: var(--theme-font-body);
}