Get up and running.

Customising Your Garage's Theme

Your garage ships with a polished dark look out of the box. If you want to match your community's branding, you can create a theme - a block of CSS that's layered on top of the built-in design. Themes are managed from inside your garage (log into your subdomain as the Master account) under Admin -> Customisation -> Themes, not here on Delta Platform.

How themes work

• The built-in Default theme is the shipped look with no overrides - it can't be edited (there's nothing to edit; it is the baseline).
• The Starter Theme is an editable example. The easiest way to begin is to open it, tweak a few values, and Preview (previews are visible only to you until you Set Active).
• You can create as many themes as you like; exactly one is active site-wide at a time.
• Theme CSS is validated for safety before it's saved (no <script>, no @import, no external url(...) calls) - if a rule is rejected, the editor tells you exactly what to fix.

The easiest knobs: colour variables

Most of the look is driven by a set of CSS custom properties (variables). Overriding a handful of them restyles the whole garage consistently. Put them inside a :root { ... } block:

:root {
  --accent: #ff5d73;          /* primary brand colour (buttons, links, highlights) */
  --accent-hover: #ff7a8d;    /* accent hover state */
  --accent-2: #ffb84d;        /* secondary accent, used as the gradient's end colour */
  --gradient-brand: linear-gradient(135deg, var(--accent), var(--accent-2));
}

Those four are the highest-impact changes. The full set of variables you can override:

Surfaces

• --bg - page background base
• --bg-elevated - slightly raised surfaces
• --card / --card-hover - card background and its hover state
• --border / --border-strong - default and emphasised borders

Text

• --text - primary text
• --muted / --muted-2 - secondary and dimmer text

Brand / accent

• --accent, --accent-hover, --accent-2 - the brand colours above
• --accent-soft - a translucent accent used for soft fills and focus rings
• --gradient-brand - the brand gradient (accent -> accent-2)

Status colours

• --danger / --danger-soft - errors and destructive actions
• --success / --success-soft - success states
• --pending / --pending-soft - warnings / pending states

Shape, depth & motion

• --radius-sm --radius-md --radius-lg --radius-pill - corner-radius scale
• --shadow-sm --shadow-md --shadow-lg --shadow-glow - drop-shadow scale
• --ease, --fast, --med - the standard easing curve and transition durations

Fonts

• --font - the UI font stack
• --font-mono - the monospace font stack

Going further with selectors

Beyond variables, you can target elements directly for finer control - for example:

.btn-primary { font-weight: 700; }
.card { border-radius: 14px; }

Start small (change --accent), Preview, and build up from there. If a theme ever looks broken, switch back to Default or Starter Theme and Set Active to restore the baseline.