Themes

Themes define the visual appearance of your public-facing sites. A theme controls colors, typography, layout, and the HTML/CSS templates used to render content. You can create multiple themes, apply different themes to different sites, and customize each theme independently.

Theme List

The main Themes view shows all themes in your workspace, split into two tabs:

• My Themes: Themes you've created or duplicated.
• Shared Themes: Built-in themes provided by the platform.

Each theme card shows the name, description, status, site count, and a Kit badge if the theme includes starter content.

Actions available from the list:

• New theme: Create a new theme (choose empty, default template, or copy from an existing theme).
• Import: Import a theme from a ZIP file exported from another workspace.
• Duplicate: Clone any theme to create a customizable copy.
• Delete: Remove themes you no longer need.

Creating Themes

Click New theme to create a new theme.

• Name: The theme display name.
• Slug: The URL-safe identifier (auto-generated from name).
• Base theme: Choose the starting point for your theme's files:
  • Empty: No files — start from scratch.
  • Default template: Start with the platform's default templates.
  • Any existing theme: Copy all files from another theme in your workspace.

Starter Kits

A starter kit is a theme that also includes pre-built sample content. When you create a new site and select a starter kit, the site is populated with pages, blog posts, news articles, events, and navigation — so you can preview the site immediately without adding content first.

Starter kits are shown with a Kit badge in the theme picker when creating a new site. You can uncheck "Include sample content" if you just want the visual theme without the demo content.

Details Tab

The Details tab contains the basic information and preview settings for a theme.

Key fields:

• Name: Display name for the theme.
• Slug: Internal identifier used in preview URLs.
• Description: Internal notes about the theme.
• Notes: Extended internal notes (not shown publicly).
• Preview image: A screenshot used in the theme picker when creating sites.

Customization Tab

The Customization tab provides a visual editor for the theme's design tokens, with a live preview panel.

Color pickers — click any color swatch to open a picker for:

• Primary, primary foreground
• Background, foreground
• Muted, muted foreground
• Border, card
• Accent, accent foreground

Font selector — choose from system fonts or Google Fonts for:

• Body font
• Heading font

Spacing sliders — adjust:

• Border radius (controls card/button roundness)
• Container max width

Live preview — the right panel shows how your changes look in real time before you save.

Tracking — configure analytics and tracking IDs that are automatically injected as scripts on public site pages:

• Google Tag Manager — GTM container ID (e.g. GTM-XXXXXXX)
• Google Analytics / Tag — GA4 measurement ID (G-XXXXXXX) or Universal Analytics property ID (UA-XXXXXXX-X)
• Microsoft Clarity — project ID
• Meta Pixel — numeric pixel ID
• LinkedIn Insight Tag — partner ID

Tracking IDs accept letters, numbers, dashes, dots, and underscores. Invalid characters are rejected with an error on save. If a cookie consent banner is enabled on the site, tracking scripts are blocked until the visitor accepts.

Templates Tab (File Manager)

The Templates tab is a full file manager with a VS Code-style interface for managing all theme files — not just templates.

Left sidebar — file tree:

• Expandable folders showing the complete theme directory.
• File type icons: green for Twig templates, purple for CSS/JS, amber for images, gray for other files.
• New badge on files that don't exist in any built-in theme (your custom additions).
• Right-click any file or folder for a context menu: New file, New folder, Rename, Delete.

Header buttons:

• New file: Create a text file in the theme root (or in a specific folder via right-click).
• New folder: Create a directory.
• Upload: Upload binary files (images, fonts, etc.) directly to the theme folder.

Editor panel (right side):

• Text files (twig, css, js, json, etc.): Code editor with save, reset, and validate.
• Image files: Preview with dimensions and file size.
• Other binary files: Download button.

Validate button: Checks file syntax for all text file types:

• Twig: balanced delimiters + paired block tags (if/endif, for/endfor, etc.)
• JSON: full parse validation
• CSS: balanced braces, unclosed comments
• JS: balanced braces, parentheses, brackets
• HTML/XML/SVG: unclosed non-void tags

ZIP upload/download: Bulk upload a ZIP of files (preserves folder structure) or download all files as a ZIP.

Theme assets: Files in the theme folder (CSS, images, fonts) are served at /site/:slug/theme-assets/ and can be referenced in templates.

Settings Tab

The Settings tab contains publishing and management settings.

Publish:

• Status: Draft, Active, or Archived. Only Active themes can be assigned to sites.
• Version: A version label for tracking changes.
• Default theme: Toggle to make this the default for new sites.

Tags: Add searchable tags for organizing themes.

Import / Export:

• Export theme: Downloads the complete theme as a ZIP (config + all files: templates, assets, _meta).
• Import theme: Upload a ZIP to create a new theme from it. The theme files and config are both imported.

Info: Shows creation date, last update, creator, and how many sites use this theme.

Tips

• Duplicate a built-in theme to get a starting point you can fully customize.
• Use the base theme selector when creating to inherit all files from an existing theme.
• Theme assets (images, CSS, fonts) are self-contained — they export and import with the theme.
• Test theme changes by visiting /site/:slug?theme=:themeSlug to preview any theme on any site.
• The media library is separate from theme assets. Use the media library for content images (blog photos, etc.) and the theme folder for design assets (logos, icons, background patterns).