Themes

Theme extensions are distributed as JSON package files containing CSS, layout templates, and settings.

{
    "name": "My Custom Theme",
    "inherit_default": true,
    "dark_mode_toggle": true,
    "css": ":root { --fs-body-bg: #1a2332; --fs-panel-bg: #243447; }",
    "layout": "<!-- optional: custom HTML layout template -->",
    "guest_layout": "<!-- optional: layout for logged-out users -->",
    "settings": {
        "body_bg": "#1a2332",
        "panel_bg": "#243447",
        "link_color": "#60a5fa",
        "dark_body_bg": "#0f172a",
        "dark_panel_bg": "#1e293b"
    }
}

CSS Variables Reference

ForumSpark uses CSS custom properties for theming. Set these in your theme's settings object. Dark mode values use the same variable names prefixed with dark_ in the settings key.

Platform tokens (CSS-only)

The modern board stylesheet also derives these tokens with light and dark defaults of their own. They are not part of the settings object; override them from your theme's custom CSS instead (scope dark overrides to body.dark).

Styling the v2 board: b2 classes

The modern board markup uses BEM classes prefixed b2- (for example .b2-cat__head, the category panel header). These classes read their colours from the CSS variables above, so setting variables themes the whole board at once. Target the classes directly in your custom CSS only when you need surgical control over one surface.