Themes
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.
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";
}