---
title: "Appearance & Theming"
description: "Customize the Landing Page Editor's colors, theme, and title so it looks like part of your product."
url: https://docs.topol.io/landing-page-editor/guide/appearance.html
---

# 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:

```typescript
{
  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:

```typescript
{
  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:

```typescript
{
  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:

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

**The window bar has to be enabled for the title to appear**: set [`windowBar`](https://docs.topol.io/landing-page-editor/guide/layout.html#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.

```typescript
{
  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.