Themes

Themes control the visual appearance of your platform — colors and component styles. They are applied globally and take effect immediately for all viewers.

Managing themes

Go to Admin → Themes. Your platform comes with a default theme pre-installed.

To create a new theme, click +. Give it a name — the editor opens automatically so you can start customizing.

To activate a theme, go to Admin → Platform Config and select it from the Theme dropdown.

Theme editor

The theme editor has two modes accessible via tabs at the top:

Simple editor

A set of color pickers for the seven design tokens that control the platform's look. Changes are applied live as you pick colors.

Token	Purpose
Primary	Buttons and active/selected states
Link	Hyperlinks and link-styled buttons
Background	Main page background
Surface	Cards, modals, and elevated surfaces
Text	Primary body text
Muted Text	Secondary text, labels, placeholders
Border	Dividers and component outlines

Primary and Link are independent on purpose — a color that works well as a button background doesn't always have enough contrast to read as text directly on the page background, so the platform's own default theme uses two different accent colors for these two roles.

Advanced editor

A Monaco CSS editor that gives full control over the raw theme CSS. The design tokens are written as CSS custom properties inside the body {} block:

/* vs:variables:start */
body {
  --bs-primary: #ff6435;
  --bs-primary-rgb: 255, 100, 53;
  --bs-link-color: #eeb627;
  --bs-link-color-rgb: 238, 182, 39;
  --bs-link-hover-color: #eeb627;
  --bs-link-hover-color-rgb: 238, 182, 39;
  --bs-body-bg: #1f1b34;
  --bs-body-bg-rgb: 31, 27, 52;
  --bs-secondary-bg: #343147;
  --bs-secondary-bg-rgb: 52, 49, 71;
  --bs-tertiary-bg: #423b63;
  --bs-tertiary-bg-rgb: 66, 59, 99;
  --bs-body-color: #f3f0f7;
  --bs-body-color-rgb: 243, 240, 247;
  --bs-emphasis-color: #f3f0f7;
  --bs-emphasis-color-rgb: 243, 240, 247;
  --bs-secondary-color: #a79fc2;
  --bs-border-color: #2e2847;
}
/* vs:variables:end */

These are standard Bootstrap 5 CSS variables — the platform's components are built on Bootstrap, so setting these here reskins buttons, dropdowns, forms, and every other component consistently.

You can add any additional CSS after the variables block to override other component styles.

The /* vs:variables:start */ and /* vs:variables:end */ markers are required. The simple editor reads and writes the color values within those markers — removing them will inject a new block for the picker and cause undefined behavior.

Custom theme development

Custom theme design and installation is available as a professional service. Contact us if you would like a theme built for your brand.