Skip to content

Themes

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.

We provide two built-in themes. Dark Mode and Light mode.

By setting an option light: true you will switch the editor design to light theme.

Dark theme
Light theme

Custom theme

Additionally, you can create your own color theme using following options:

When using this option light: true in options won't take any effect.

Default dark mode:

js
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 mode:

js
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',
  }
}

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.

js
theme: {
  canvasColor: "#e2e2e2";
}