Appearance & Theming

Four options control how the editor looks in your product: theme restyles the interface, light switches the base color scheme, colors defines the swatches offered in color pickers, and title names the editor window. Together they cover the typical white-label setup. A fifth, defaultTemplateSettings, styles the page rather than the editor around it.

theme

The theme object (object, optional) sets the editor's main color scheme so the UI can match your brand:

{
  theme: {
    preset: "light",
    canvasColor: "#f5f5f5",
    borderRadius: { small: "4px", large: "12px" },
    font: {
      family: "Inter",
      url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
    },
    colors: {
      primary: "#007bff",
      secondary: "#6c757d",
      success: "#28a745"
    }
  }
}

The recognized properties:

• preset ("light" | "dark"): base color scheme. Setting "light" also enables light mode, equivalent to light: true, and overrides light: false. The reverse does not hold: preset: "dark" does not switch light mode off when light: true is set.
• canvasColor (string): color of the area around the page canvas, the most common white-label tweak.
• borderRadius (object): corner rounding of UI elements, { small?: string, large?: string }, e.g. { small: "4px", large: "12px" }.
• font (object): UI font, { family?: string, url?: string }. When url is set, the stylesheet is loaded automatically.
• colors (object): named color tokens applied as CSS variables. Includes primary, primary-light, primary-dark, secondary, error, success, active, and a numeric grey ramp (900 down to 10), among others.

Without a theme, the editor uses the dark preset (or light, if light: true is set).

TIP

Unknown keys in the theme object are silently ignored rather than reported as errors. If a theme change has no visible effect, double-check the property names against the list above.

light

The light option (boolean, default false) switches the editor from its default dark mode to a light color scheme:

{
  light: true
}

theme.preset and light are two entry points to the same switch: theme.preset: "light" also enables light mode and wins over light: false. Note that theme.preset: "dark" does not override light: true; only the light preset takes precedence.

colors

The colors option (string[], optional) defines a custom color palette for the editor's color pickers:

{
  colors: [
    "#007bff",
    "#28a745",
    "#dc3545",
    "#f8f9fa"
  ]
}

The values appear as preset swatches both in the block style pickers and in the inline text-editing toolbar, which keeps users on approved brand colors while they style pages. Without the option, no preset swatches are shown and colors are picked freely.

title

The title option (string, optional) sets the name shown in the editor's window bar:

{
  title: "My Brand Landing Page Editor",
  windowBar: ["fullscreen", "close"]
}

The window bar has to be enabled for the title to appear: set windowBar (e.g. ["close"]) or renameTemplate: true. Setting title alone produces no visible change.

The title can be changed at runtime with LPE.setTemplateName(name), which is useful in white-label or multi-tenant setups where the name follows the loaded template.

defaultTemplateSettings

Everything above restyles the editor. The defaultTemplateSettings object (object, optional) restyles the page a user starts from: the typography, colors, and element defaults a blank template begins with, so new pages arrive on brand instead of on Topol's generic defaults.

{
  defaultTemplateSettings: {
    "template-color": "#fafafa",
    body: { "font-family": "Inter, sans-serif", "font-size": "16px", color: "#111111" },
    h1: { "font-size": "40px", "font-weight": "bold" },
    a: { color: "#007bff" },
    button: {
      attributes: { "background-color": "#007bff", "border-radius": "8px" },
      hover: { "background-color": "#0056b3" }
    }
  }
}

The object mirrors the editor's Settings panel and accepts these groups:

• Page-level: template-color (the page background), body, and the text tags h1, h2, h3, a, ul, ol, li.
• Per-element defaults: section, column, row, navbar, navbarMenu, navbarMenuItem, navbarHamburgerContainer, button, divider, form, image, social, spacer, text, and video. Each takes an attributes object plus optional mdAttributes, smAttributes, and xsAttributes for the tablet, mobile-landscape, and mobile breakpoints. button additionally takes hover.

Every field is optional and merges over the built-in defaults, so you can set a single heading size without restating the rest. Values that don't match the expected shape are dropped silently rather than reported, so verify a change took effect in the editor rather than assuming it did.

WARNING

defaultTemplateSettings only shapes the blank starting template. It is applied before any template you pass to load(), and a loaded page keeps the styles stored in its own JSON. Passing the option later through updateOptions() changes what a new page looks like, not the page currently open.