Skip to content

Themes

Admin → Settings → Themes changes the workspace colours and logo. It is the only place where a customer's visual identity is applied, and it affects every user.

Themes page

The Themes page: logo, the predefined themes, the colour palette, and a preview with its own light and dark switch.

The page

Area What it holds
Logo Change logo: the image shown in the top bar, with a light and a dark variant
Predefined themes Eleven colour presets, each with its name and swatches
Color palette The six colours of the selected theme, with their hex values
Preview A live sample with a Light / Dark switch, so you can check both modes before saving
Restore defaults and Save theme Go back to the product palette, or apply what you have chosen

A dot next to the page title marks unsaved changes. It appears as soon as you pick a theme or edit a colour, and disappears when you save.

The predefined themes

Lurana (the default), Emerald, Ruby, Ocean, Sunset, Forest, Lavender, Slate, Rose, Amber, and Teal.

Each card shows the theme name translated to your language and a row of dots with its colours. Selecting a card updates the preview immediately; nothing is applied until you choose Save theme.

The cards behave as a radio group: selecting one clears the previous selection, they are reachable with Tab and the arrow keys, and Enter or Space selects the focused one.

Choose a theme

  1. Pick a card, with the mouse or from the keyboard.
  2. Check the preview in Light and in Dark — a palette that reads well in one mode can fail in the other.
  3. Choose Save theme.

The colours then reach the application, not only the preview.

Ruby applied

The Ruby preset after Save theme: the primary button, the selected tab, the active menu row, and the pager all take the new colour.

Change logo opens a modal with a Light / Dark switch, because the workspace keeps one logo per background: the light variant is used on light backgrounds and the dark variant when a user is in dark mode.

Logo upload

The logo modal: choose the variant, then drop an image or click the area.

  1. Choose Light or Dark.
  2. Click the dashed area or drag an image onto it. PNG, JPEG, GIF and WebP are accepted.
  3. The image opens in a crop editor. Drag to frame it, or use Zoom (0.1× to 3×) or Use full image.
  4. The editor shows the result in the top bar (rendered 32 px tall), with previews for desktop and for a small screen.
  5. Choose Crop, then Save logo.

Choose different file replaces the image without leaving the editor. Cancel closes it and leaves the current logo as it was.

Background colour

If the uploaded image has a solid background, the editor offers to make that colour transparent before saving. A PNG with transparency is the cleanest result.

Custom colors

Select Custom and the Color palette becomes Custom colors: one row per role — Primary, Secondary, Success, Danger, Warning and Info — each with its swatch and its hex value.

Custom colors

Selecting a row opens its picker: saturation and brightness, hue, and hex.

  1. Select the row you want to change.
  2. Adjust it in the picker: the saturation/brightness field, the Hue slider, or the hex box.
  3. The three controls stay in sync — typing #7c3aed moves the hue to 262, and moving the hue to 140 writes #3aed76. The preview follows.

Changes stay in the preview until you choose Save theme.

Two behaviours worth knowing:

  • Trying a preset does not discard your palette: select Emerald, then Custom again, and every custom value is still there.
  • Restore defaults puts the palette back to the product colours and selects the Lurana card — still unsaved until you choose Save theme.

After saving

Check these, in this order:

  1. the colours reached the application, not just the preview;
  2. after a reload, Custom is still selected and the hex values are unchanged;
  3. a user in dark mode still sees a readable interface;
  4. the logo is the intended one in both modes.

Restore defaults followed by Save theme returns the workspace to the product palette — useful after trying a theme on a live installation.

Permissions

This page requires PM_SETUP. See Permission reference.