Visual Theme Editor ​

The Theme Editor is a visual, real-time sidebar tool that lets board administrators customize every color, font, and layout setting without writing CSS. Changes preview instantly on your live forum — just click Save when you're happy.

Opening the Theme Editor ​

1. Navigate to your forum as an admin
2. Click the palette icon in the admin toolbar (bottom-right)
3. The editor sidebar opens, showing the current theme's settings

Editor Modes ​

The editor has two mode toggles at the top:

Light / Dark Mode ​

Switch between editing your light mode and dark mode color palettes independently. Each mode has its own set of color overrides.

Device Preview ​

Preview how your forum looks on different screen sizes:

Editor Sections ​

The editor is organized into tabs along the second toolbar row:

Color Palette Reference ​

Every color setting maps to a CSS custom property (variable). When you set a color in the editor, it generates a :root block that overrides the default theme values.

Page ​

Header ​

User Menu Bar ​

Navigation ​

Breadcrumbs ​

Panel Headers ​

Secondary Headers ​

Panel Body ​

Forum Rows ​

Topic Rows ​

Replies / Posts ​

Separator ​

Mini Profile ​

Buttons — Primary (CTA) ​

Buttons — Blue ​

Buttons — Secondary ​

Buttons — Danger ​

Buttons — Success ​

Status Indicators ​

Bulletins ​

Typography & Layout Settings ​

These are non-color settings managed via the Typography and Components tabs:

Theme Images ​

Upload custom images to replace the default ForumSpark assets:

Custom CSS ​

For advanced customization beyond the color palette, use the Custom CSS tab to write raw CSS. This CSS is appended after all theme variables and the base stylesheet.

/* Example: Rounded panels with shadow */
.panel {
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Example: Larger forum markers */
.forum__marker img {
    width: 48px;
    height: 48px;
}

How It Works ​

The theme editor generates CSS custom property overrides based on your settings:

/* Generated from your theme editor settings */
:root {
    --fs-body-bg: #fef7cd;
    --fs-panel-title-from: #1e3a5f;
    --fs-panel-title-to: #2c5282;
    --fs-font-family: 'Poppins', sans-serif;
}

/* Dark mode overrides (separate dark palette) */
body.dark {
    --fs-body-bg: #1a1a2e;
    --fs-panel-title-from: #0f1629;
}

This is injected as an inline <style> tag, meaning your settings always override the default values defined in the theme's CSS variables.

Resetting a Setting ​

Each color input has a reset button (✕) that appears when a custom value is set. Clicking it removes your override, reverting that setting to the default theme value.

Leaving a field showing "default" means no override is applied — the theme's default CSS variable value is used.