Structure

Minimal manifest

A variable theme is built around a JSON manifest containing a stable identifier, metadata and the variables block.

{
  "id": "ocean",
  "name": "Ocean",
  "description": "Deep blue palette",
  "author": "Jane Doe",
  "version": "1.0",
  "type": "variables",
  "variables": {
    "--bg": "#0a1628",
    "--bg2": "#0d1f3c",
    "--bg3": "#152849",
    "--border": "#1e3a5f",
    "--text": "#cdd9e5",
    "--text2": "#7d9ab5",
    "--accent": "#39c5cf",
    "--accent2": "#1a9aa4",
    "--green": "#26a641",
    "--red": "#f85149",
    "--yellow": "#e3b341",
    "--purple": "#bc8cff"
  }
}
Supported tokens

Required and optional variables

VariableMain roleStatus
--bg, --bg2, --bg3Primary, secondary and tertiary backgroundsRequired
--borderBorders and separatorsRequired
--text, --text2Primary and secondary textRequired
--accent, --accent2Links, focus states and active statesRequired
--green, --red, --yellow, --purpleStates and complementary accentsRequired
--font-mono, --font-sansShell fontsOptional
--radius, --shadowRadius and shadow tokensOptional

The shell default values live in public/assets/app.css. A variable theme only replaces these tokens, it does not modify HTML structure.

Validation

Rules enforced by the engine

  • id must be 1 to 32 characters long and only use a-z, digits, dashes and underscores.
  • name is required, while description and author are length-limited.
  • version only accepts a short format based on letters, digits, dots, underscores and dashes.
  • CSS values are filtered to reject unsafe @import, javascript:, expression, HTML tags and dangerous characters.
Validation is centralized in src/ThemeManager.php. When in doubt about a token or format, that is the right file to inspect before shipping.
Iteration

Recommended workflow

  1. Create a minimal manifest with all required variables.
  2. Check baseline contrast on the sidebar, cards and form states.
  3. Add optional variables afterward to align typography and density.
  4. Move to an advanced theme only if the need goes beyond tokens.

Move to the next level

The next section explains how to structure an advanced theme, wire a style.css file and override slots, parts or pages.