Themes & Appearance

This feature is available with the Plugin Expansion plan and higher.

If you're on the Plugin for Startup plan, consider upgrading to access this feature. For more details, visit our pricing page or contact support.

Topol offers flexible theming options for the plugin editor interface, allowing you to tailor the editor’s visual style to match your application or branding.

Built-in Themes

Topol provides two built-in design presets:

Dark Theme (default)

Ideal for low-light environments or applications with dark UI styling.

This theme is used by default, but it can also be set with the light: false option.

light: false, // or skip this option

Light Theme

Clean and minimal, great for daylight or traditional UI settings.

To switch the editor to the light theme preset, use the light: true option.

light: true,

Custom Theme

If you want complete control over the editor's appearance, you can define your own custom theme using the theme object in TOPOL_OPTIONS.

This overrides the light: true option and provides you full flexibility over the editor’s color scheme.

The theme object accepts the following top-level properties:

Property	Type	Description
preset	'dark' | 'light'	The base color preset the editor starts from. Any colors you supply are merged on top of this preset, and any color you omit falls back to the preset's default. Defaults to 'dark' when not set.
colors	object	Overrides for individual interface colors (see the examples below).
borderRadius	object	Overrides for the editor's corner-rounding values (see Border Radius).
canvasColor	string	The email canvas background color used while designing (see Canvas Color in Email Background).
font	object	The font used across the editor interface (see Custom Font).

The preset property

preset selects which built-in palette the custom theme is layered on top of. It behaves like the light shorthand, but is required when you pass a theme object so the editor knows which defaults to use for any color you don't explicitly override.

theme: {
  preset: 'light', // or 'dark' — defaults to 'dark' if omitted
}

Default Dark Theme:

theme: {
  preset: 'dark',
  colors: {
      '900': "#13171E",
      '800': "#1F2329",
      '700': "#272A30",
      '600': "#32363E",
      '500': "#3C4048",
      '400': "#494D55",
      '300': "#575B62",
      '200': "#828488",
      '100': "#CBCBCD",
      '50': "#F7F7F8",
      '10': "#FBFBFC",
      white: '#ffffff',
      primary: '#9D82FF',
      'primary-light': '#B4A0FF',
      'primary-light-2': '#DFD9FF',
      secondary: '#11CFC4',
      'secondary-light': '#00E5D8',
      'secondary-light-2': '#CEFAF8',
      error: '#C4261A',
      'error-light': '#E32F22',
      'success': '#11BA5C',
      'success-light': '#0CDB68',
      'active': '#409EFF',
      'active-2': '#00DE52',
      'active-3': '#FF9900',
  }
}

Default Light Theme:

theme: {
  preset: 'light',
  colors: {
      '900': "#F7F7F8",
      '800': "#F1F1F2",
      '700': "#EBEBEC",
      '600': "#DFDFE0",
      '500': "#D7D8D9",
      '400': "#C9CACB",
      '300': "#A4A5A7",
      '200': "#8D8F92",
      '100': "#727477",
      '50': "#4B4C4E",
      '10': "#2B2B2C",
      white: '#ffffff',
      primary: '#9D82FF',
      'primary-light': '#B4A0FF',
      'primary-light-2': '#DFD9FF',
      secondary: '#11CFC4',
      'secondary-light': '#00E5D8',
      'secondary-light-2': '#CEFAF8',
      error: '#C4261A',
      'error-light': '#E32F22',
      'success': '#11BA5C',
      'success-light': '#0CDB68',
      'active': '#35AAFF',
      'active-2': '#0FCE56',
      'active-3': '#FF9900',
  }
}

Border Radius

You can control how rounded the editor's interface corners are with the borderRadius object. Each key is optional and accepts any valid CSS border-radius value as a string (for example "4px", "0.5rem", or "0" for sharp corners).

theme: {
  preset: "dark", // or light
  borderRadius: {
    extraSmall: "2px",  // compact UI elements, e.g. small chips and tags (default: 0.25rem)
    small: "6px",       // inputs, buttons and similar controls (default: 6px)
    large: "8px",       // larger surfaces, e.g. panels and cards (default: 8px)
    extraLarge: "12px", // largest, most prominent containers (default: 0.75rem)
  },
}

Custom Font

By default the editor interface uses the Inter font. You can replace it with your own font using the font object. This affects only the editor's user interface; it does not change the fonts available inside your templates.

The font object accepts two optional keys:

Key	Type	Description
family	string	The font family applied to the editor interface (for example "Georgia"). If you pass a single family without a fallback, sans-serif is appended automatically.
url	string	A stylesheet URL that loads the font, for example a Google Fonts link. The stylesheet is injected for you, so the font is available before it is applied.

theme: {
  font: {
    family: "Georgia", // applied across the editor interface
    url: "https://fonts.googleapis.com/css2?family=Georgia&display=swap", // loads the font
  },
}

Both keys are optional and work independently. url loads a font the browser doesn't already have; family switches the interface to it. If the font is already available (a system font, say, or one your application has loaded), you can set family on its own and leave out url.

To control the fallback yourself, pass a full font stack as the family. When it already contains a comma, it is used as-is and nothing is appended:

theme: {
  font: {
    family: "Georgia, serif",
  },
}

WARNING

Custom fonts come from outside our official codebase, so we can't guarantee how a given font will render in the editor. Some fonts may affect the spacing or legibility of certain controls. Test your chosen font well before using it in production.

Color of Locked Structures and Content Blocks

You can set the background color and opacity of all locked structures and locked content blocks in your templates. To set the specific color, use the following options:

theme: {
  preset: "light", // or dark
  colors: {
    // all other color settings
    "locked-structure": "your color as a string", //set color of all locked structures
    "locked-content": "your color as a string", //set color of all locked content blocks
  }
}

When setting locked-content color, the color appears in the foreground; therefore, you must adjust the color opacity. Otherwise, the block content will be completely hidden behind the color. Opacity can be easily adjusted by defining your colors in the RGBA color model using the rgba() function.

When setting locked-structure color, the color appears behind the structure content, so adjusting the opacity is recommended.

Structures and content blocks can be locked by using our Roles and permission feature.

Canvas Color in Email Background

Additionally, it might make sense to change an email canvas background, used only for designing purposes. This canvas color will not be seen in final email. To change the email background opt for Email background in Settings inside the editor.

theme: {
  canvasColor: "#e2e2e2";
}