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. You can generate a complete look from a ready-made preset or a guided form, edit the resulting CSS by hand, preview it live, and import or export a stylesheet.

How to reach it

The editor opens from the Themes page under Settings → Appearance:

• 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 Edit on its 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 the Quick Create sidebar sits on the right when it is open.

The toolbar

Everything that manages the theme lives in the header bar, left to right:

Theme Editor toolbar controls

Control	What it does
Back arrow	Returns to the theme list. If you have unsaved edits you are asked to confirm first, so you do not lose work.
Theme name	An inline text field, placeholder Theme Name. A name is required — Save stays disabled until you enter one — and no two themes may share a name.
Panel scope	A dropdown showing the current choice: Both Panels (the default for a new theme), Admin Panel or Client Panel. It decides which panels the theme applies to once activated, and which panel the preview draws.
Preview (eye icon)	Swaps the main area between the CSS code editor and a live preview with your styles applied. It starts switched off.
Quick Create (wand icon)	Opens or closes the Quick Create sidebar, which generates a theme without writing CSS. Closing it also drops any preview it was driving.
Import (upload icon)	Loads a .css file from your computer, replacing everything currently in the editor.
Export (download icon)	Downloads the current CSS as a .css file named after the theme. Disabled while the editor is empty.
Save	Stores the name, panel scope and CSS. On a brand-new theme the editor confirms with Theme created successfully and then moves you into that saved theme, so your next Save updates it rather than creating a second copy.

Note: A floating You have unsaved changes pill sits at the bottom of the screen whenever you have edits that have not been saved. Saving does not activate the theme — do that from the Themes page.

Writing CSS by hand

With Preview switched 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.

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.

Note: A few CSS features are removed for safety before a theme is applied: @import rules, IE-era expression() values, javascript: URLs and script-binding declarations. A stylesheet is also capped at roughly 500 KB. Because @import never runs, a theme cannot pull in a web font by itself — a font family you name falls back to the panel’s built-in interface font unless the viewer’s device already has it.

How a theme overrides the panels

Your CSS is layered on top of the built-in stylesheet rather than replacing it, and the panels are painted from a set of named colour values. A theme redefines those values; anything it leaves out keeps its built-in value instead of being ignored.

Warning: That fallback is the single most common way a hand-written theme goes wrong. Repaint only the page and card backgrounds dark, and the text, border and muted-surface values stay at their built-in light-mode settings — near-black text on a near-black card, invisible, with no error message anywhere to explain it. If you write a dark theme by hand, set the text, border and muted-surface values too, or generate a complete theme first (below) and edit the result.

A generated theme sets the whole set in one go. These are the groups it defines, and what each one paints:

Value groups a generated theme defines

Group	What it paints
Page and card surfaces	The page background behind everything, and the card surface used by cards, tables, the sidebar, the header, modals and dropdown menus.
Derived surfaces	A slightly deeper muted surface (table headers, secondary panels) and a hover surface for rows and menu items — both worked out from your card colour.
Borders	The normal hairline used for dividers, card edges and input outlines, plus a stronger variant for emphasis.
Text	Three levels: body text, muted text for secondary labels, and a subtle level for placeholders and hints.
Neutral scales	The full grey ramp (and a second, slightly warmer one) that most components read for text, borders and quiet surfaces. Driven by the Hue and Saturation sliders.
Colour families	Fourteen full colour ramps derived from your six colour pickers, so every shade in the panel stays in the same palette.
Monitoring values	A second naming of the same backgrounds, text levels and border used by the monitoring and topology screens.
Shape tokens	Corner radius, shadow depth, spacing unit and font family — set from the Border Radius, Shadows, Density and Font choices.

The six colour pickers each seed more than the colour they are named for:

• Primary drives buttons, links, active navigation, focus rings and the first half of gradient headings.
• Accent drives the second half of those gradients and the violet/purple highlights; blended with Primary it also produces the indigo family.
• Success drives the green, emerald and teal shades used by positive badges and states.
• Danger drives red, plus the pink and rose shades used by destructive actions and error states.
• Warning drives amber, orange and yellow, used by pending and caution states.
• Info drives the cyan family used by informational badges and charts.

Quick Create: generate a theme without code

Open the Quick Create sidebar with the wand icon (it opens by itself on a new theme). It writes a complete stylesheet 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 twelve ready-made looks in two groups — Dark (Obsidian Flux, Meridian Glass, Graphite Noir, Ember Crimson, Synthwave, Goldsmith) and Light (Porcelain, Sandstone, Alabaster Mint, Rosé Quartz, Lilac Bloom, Harbor) — with a count beside each group heading. Every card is a miniature, fully styled panel dashboard rendered with that preset’s real CSS, under a bar showing the preset’s name, four dots of its key colours and its card, button and radius choices.

• Hover a preset to throw it at the live preview — nothing is committed. You only see this if Preview is switched on; with the code editor showing, the hover changes nothing.
• Click a preset to generate its full CSS into the editor. The theme name is filled in from the preset only if you have not typed one, and a message confirms the theme was generated and is ready to review and save.

The miniature previews and the live preview draw the client dashboard when the panel scope is Client Panel, and the admin dashboard otherwise.

Custom tab

The Custom tab is a guided form. Adjust the controls, then click Generate Theme CSS to write a stylesheet from your choices into the editor.

Custom tab options

Option	What it controls
Mode	Dark or Light. Switching mode resets the surfaces, neutral saturation and every visual-style choice to sensible defaults for that mode, so pick this first.
Theme Name	Used as the theme’s name when you generate, if the header field is still empty.
Surfaces	Two colour pickers: Page BG (the page background) and Card BG (the card surface). The muted and hover surfaces are derived from them.
Neutral Tint	Two sliders — Hue (0–360°) and Saturation (0–30%) — that tint the whole grey ramp used for text, borders and muted surfaces. Saturation 0 gives pure grey.
Colors	Six pickers — Primary, Accent, Success, Danger, Warning, Info — each seeding a family of shades as described above. The chosen hex value is shown under each label.
Glassmorphism effects	A checkbox that makes card surfaces semi-transparent with a frosted blur. On by default in Dark mode, off in Light.
Card Style	Elevated (shadow), Flat (border only), Glass (blur), Outlined (thick border) or Borderless.
Button Style	Soft (tinted bg), Solid (filled), Outline (border), Gradient or Pill (max round).
Border Radius	Sharp, Rounded, Smooth or Pill (max round) — how rounded every corner is.
Density	Compact, Comfortable or Spacious — the spacing unit the whole layout is built from.
Shadows	None, Subtle, Medium or Dramatic.
Borders	Visible (thick), Subtle or None.
Font	System Default, Inter, DM Sans, Outfit, Plus Jakarta or Space Grotesk. A face the viewer’s device does not already have falls back to the built-in interface font.

While you are on the Custom tab the live preview follows the form, so with Preview switched on you see each change immediately. Generate Theme CSS is what actually writes the stylesheet into the editor; until you click it, nothing is committed.

Warning: Generating — from a preset or from the Custom form — replaces the entire contents of the code editor. Export first if you have hand-written changes you want to keep.

Live preview

Toggle the eye icon to swap the code editor for a live preview of your CSS:

• With Admin Panel or Both Panels scope, the preview loads the real admin panel with your styles applied on top, so you see your own data and screens.
• With Client Panel scope, it renders a full customer-dashboard mock-up — sidebar, header, stat cards, a chart and a table — built from the same markup the real panel uses.

The preview replaces the code editor rather than sitting beside it, so switch it off again to edit CSS. Hovering a preset or adjusting the Custom form drives this preview without changing your saved theme.

Importing and exporting

• Import — click the upload icon and choose a .css file. Its contents replace whatever is in the editor and a confirmation appears; the change is not stored until you Save.
• Export — click the download icon to save the current CSS to your computer as <theme name>.css. Useful as a backup before a large edit, or to move a look between installations.

Tips and gotchas

Tip: Scope deliberately. Choose Admin Panel or Client Panel when a theme should restyle only one side; use Both Panels for shared changes such as a global font. Remember that activating a Both Panels theme switches off any panel-specific theme, and vice versa — see Themes.

Tip: Start from a preset even when you want something bespoke. A generated theme defines every value the panels read, so editing it can only change what you touch; a short hand-written override leaves everything else on the built-in light-mode values.

Note: Saving stores the theme but does not switch your panels to it. Activate it from the Themes page. If you edit and save a theme that is already active, the new styling is picked up on the next page load — and can take a few minutes to reach browsers that already have a panel open.

Note: Import replaces the entire editor contents, and there is no undo once you save. Export your current version first.

Related

Themes · Custom Code · Settings