Theme Editor

What the Theme Editor is for

The Theme Editor is a full-screen workspace where you build and refine a single theme — the custom CSS that restyles your admin and client panels (colours, surfaces, card and button styles, fonts, spacing, and more). You can write CSS by hand, generate a complete look from a preset or a guided form, preview it live, and import or export stylesheets.

How to reach it

The editor opens from the Themes page:

• To start a fresh theme, click Create Theme. The editor opens blank with the Quick Create sidebar already showing.
• To change an existing theme, click the Edit (pencil) action on its theme card.

The editor fills the screen: a toolbar runs across the top, the main area below shows either the code editor or a live preview, and an optional Quick Create sidebar sits on the right.

The toolbar

Everything you need to manage the theme lives in the header bar, left to right:

Control	What it does
Back arrow	Returns to the Themes list. If you have unsaved edits, a confirmation prompt appears first so you don’t lose work.
Theme name	An inline text field. A name is required — the Save button stays disabled until you enter one.
Panel scope	A dropdown that controls which panels the theme applies to: Both Panels, Admin Panel, or Client Panel. The button shows the current choice with a small icon.
Preview (eye icon)	Toggles the main area between the CSS code editor and a live preview of the panel with your styles applied.
Quick Create (wand icon)	Opens or closes the Quick Create sidebar for generating a theme without writing CSS.
Import (upload icon)	Loads a .css file from your computer, replacing the current editor contents.
Export (download icon)	Downloads the current CSS as a .css file, named after the theme. Disabled when the editor is empty.
Save (purple button)	Stores the theme name, panel scope, and CSS. While saving it shows a spinner; on success a confirmation message appears near the top.

A floating “You have unsaved changes” pill appears at the bottom of the screen whenever you have edits that haven’t been saved. Use it as a reminder before navigating away.

Writing CSS by hand

When Preview is off, the main area is a full-height code editor with line numbers, CSS syntax highlighting, word wrap, and a monospace font. A new theme starts with a short comment block explaining that your rules load after the default styles, so anything you write overrides the built-in look. Type your CSS below the comment; edits are tracked automatically and the unsaved-changes pill appears.

1. Enter a theme name in the header.
2. Choose the panel scope for where the styles should apply.
3. Write or paste your CSS rules in the editor.
4. Click Save.

Quick Create: generate a theme without code

Open the Quick Create sidebar with the wand icon (it opens automatically on a new theme). It builds a complete stylesheet for you and loads the result into the code editor, where you can still fine-tune it by hand. The sidebar has two tabs: Presets and Custom.

Presets tab

The Presets tab is a gallery of ready-made looks, grouped into Dark and Light sections. Each card is a miniature mock-up of a panel dashboard in that style, with the theme’s name and a row of its key colours.

• Hover a preset to preview it live in the main area — nothing is committed yet.
• Click a preset to generate its full CSS, load it into the editor, and pre-fill the theme name (if you haven’t set one).

After picking a preset, switch off the preview if you want to tweak the generated CSS, then click Save.

Custom tab

The Custom tab is a guided form. Adjust the controls, then click Generate Theme CSS to produce a stylesheet from your choices. The form is split into colour controls and visual-style controls:

Option	What it controls
Mode	Dark or Light base. Switching mode resets the colour and style fields to sensible defaults for that mode.
Theme name	Pre-fills the name field in the header toolbar.
Surfaces	Two colour pickers: Page BG (page background) and Card BG (card background).
Neutral tint	Two sliders — Hue and Saturation — that tint the grey scale used for borders and muted text.
Colours	Individual pickers for Primary, Accent, Success, Danger, Warning, and Info.
Glassmorphism	A checkbox that makes card backgrounds semi-transparent for a frosted-glass effect.
Card style	Elevated, Flat, Glass, Outlined, or Borderless.
Button style	Soft, Solid, Outline, Gradient, or Pill.
Border radius	Sharp, Rounded, Smooth, or Pill — how rounded corners appear.
Density	Compact, Comfortable, or Spacious — overall spacing.
Shadows	None, Subtle, Medium, or Dramatic.
Borders	Visible, Subtle, or None.
Font	System, Inter, DM Sans, Outfit, Plus Jakarta, or Space Grotesk.

As you adjust the form, the main preview updates to reflect your settings. When you’re happy, click Generate Theme CSS to write the CSS into the editor, then refine and Save.

Live preview

Toggle the eye icon to swap the code editor for a live preview that applies your CSS to a realistic panel layout. The preview follows the panel scope: with Admin Panel scope it renders the admin interface; with Client Panel scope it shows a customer-dashboard mock-up with stat cards, a services table, invoices, and recent activity. Hovering a preset or editing the Custom form also drives this preview without committing any change.

Importing and exporting

• Import — click the upload icon and choose a .css file. Its contents replace whatever is in the editor, so export or copy first if you want to keep the current version.
• Export — click the download icon to save the current CSS to your computer. This is handy for backups or for reusing a stylesheet elsewhere.

Tips and gotchas

Scope deliberately. Choose Admin Panel or Client Panel when a theme should only restyle one side — this keeps your overrides from accidentally bleeding into the other panel. Use Both Panels for shared changes such as a global font.

Your CSS loads after the default styles, so you can override existing rules without rebuilding the whole panel. You don’t need to redefine everything — just the pieces you want to change.

Saving stores the theme but does not switch your panels to it. To make a theme the one your panels actually use, activate it from the Themes page. If you edit and save the theme that is already active, your changes apply to that look once saved.

Import replaces the entire editor contents. If you’ve made manual edits you want to keep, export them first before importing another file.

Related

Themes · Settings