Themes and effects
Set the colours and the visual effects your panel uses.
License required
Theme customization needs the Theme Customization license feature. Custom CSS also needs Custom CSS or White Label.
The Themes page controls the colours, the glass effects, and the animations of the panel. It also holds the layout theme controls.
Navigate to Admin > Appearance > Themes. The page title reads Themes & Effects.
You need the View Appearance permission to open the page, and Manage Appearance to save.
Preview and save
- Click Preview at the top right to add a Live Preview card to the page. Click Exit Preview to remove it.
- Every change applies to the panel at once, so that you can judge it. The change is not permanent until you click Save Theme.
- While changes are pending, a bar reads You have unsaved theme changes. If you leave the page without a save, the panel returns to the stored theme.
Theme presets
A preset is a whole colour scheme with matching effects. Click a tile to apply it.
The filter pills above the tiles are All, Glass, Glow, Gradient, Neon, and Solid.
| Preset | Category |
|---|---|
| Glass Noir | Glass |
| Frosted Sapphire | Glass |
| Arctic Frost | Glass |
| Deep Ocean | Glass |
| Forest Mist | Glass |
| Light Glass | Glass |
| Neon Cyber | Neon |
| Synthwave | Neon |
| Crimson Night | Glow |
| Volcanic | Glow |
| Aurora | Gradient |
| Golden Hour | Gradient |
| Default Dark | Solid |
| Midnight Blue | Solid |
| Emerald | Solid |
| Purple Haze | Solid |
| Rose | Solid |
| Light Mode | Solid |
Light and dark
The panel has no light and dark switch. It reads the brightness of the Background colour and adjusts. For a light panel, choose Light Mode, Light Glass, or Arctic Frost, or set a light background colour by hand.
Visual effects
Glass morphism
| Setting | Description |
|---|---|
| Enable Glass Effect | Gives panels and cards a frosted glass look. |
| Glass Opacity | How solid the glass is. The range is 20 to 95 percent. |
| Blur Amount | The blur behind the glass. The range is 0 to 24 pixels. |
| Glass Border | Adds a light border to a glass element. |
Background glow
| Setting | Description |
|---|---|
| Enable Glow Effect | Adds a coloured glow behind the page. |
| Glow Color | The colour of the glow. Use Primary copies the primary colour. |
| Secondary Glow | A second glow colour. Disable removes it. |
| Glow Opacity | The strength of the glow. The range is 5 to 60 percent. |
| Glow Size | Small, Medium, Large, or Extra Large. |
| Position | Top Left, Top Center, Top Right, Center, Bottom Left, Bottom Center, or Bottom Right. |
| Secondary Position | The position of the second glow. This control appears only with a second colour. |
| Animate Glow | Adds a slow floating movement. |
Button animations
Choose one card: None, Lift, Glow, Pulse, Shine, Border Glow, Scale, or Ripple.
With any option other than None, an Animation Intensity slider appears. The range is 10 to 100 percent. A low value is subtle. A high value is strong.
A Button Preview box under the cards shows the effect. Hover over the sample buttons.
Sidebar animations
Choose one card: None, Slide, Fade, Glow, Lift, Scale, Underline, or Pill.
A Sidebar Animation Intensity slider and a Sidebar Preview box work the same way.
Mobile
Reduce Effects on Mobile turns off the animations and lowers the glow on a small screen. Use it for better performance on a phone.
Custom colors
This card is closed by default. Open it to set nine colours by hand. Each colour has a swatch and a hex box.
| Colour | Used for |
|---|---|
| Primary Color | The main accent. |
| Secondary Color | The second accent. |
| Accent Color | Highlights and focus rings. |
| Background | The page background. |
| Surface | Card backgrounds. |
| Border | Borders and dividers. |
| Success Color | Positive states. |
| Warning Color | Caution states. |
| Error Color | Error states. |
WARNING
Check the contrast between Background, Surface, and your text colours. A low contrast makes text hard to read.
Custom CSS
Click Show Editor to open the CSS box. Your rules apply across the whole panel. The editor shows a character count.
These variables are available in your rules:
--color-primary--color-primary-rgb--glass-blur--glass-opacity
Reset to default
A Reset to Default button sits in the action row at the bottom of the page, next to Save Theme. It returns the colours, the effects, and the custom CSS to the first preset, Glass Noir.
The reset is not permanent until you click Save Theme. Use it when a colour change makes a page unreadable.
TIP
The Layout Themes section further down the page has its own Reset to Default button. That one returns the panel layout, not the colours. Read Layout Themes.
Saving
Click Save Theme to store the colours, the effects, and the custom CSS. Every active session then shows the new theme.
Next steps
- Layout Themes - replace pages and components.
- Branding - the panel name, the logos, and the favicon.
- Fonts - typography.