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',
borderRadius: {
small: '4px'
large: '8px'
},
colors: {
'900': "#13171E",
'800': "#1F2329",
'700': "#272A30",
'600': "#32363E",
'500': "#3C4048",
'400': "#494D55",
'350': "#575B62",
'300': "#828488",
'200': "#CBCBCD",
white: '#ffffff',
primary: '#917DFF',
'primary-light': '#A696FF',
'primary-dark': '#836EFA',
secondary: '#00D7CA',
'secondary-light': '#08E8DA',
error: '#D52A3D',
'error-light': '#FA5151',
'success': '##00DE52',
'success-light': '#0CE16B',
'active': '#409EFF',
'active-light': '#ACCCFB',
}
}
Default light mode:
js
theme: {
preset: 'light',
borderRadius: {
small: '4px'
large: '8px'
},
colors: {
'900': "#161616",
'800': "#262626",
'700': "#393939",
'600': "#666666",
'500': "#6f6F6f",
'450': "#8D8D8D",
'400': "#c5c5c5",
'350': "#C7C7C7",
'300': "#D6D6D6",
'200': "#EDEDED",
'150': "#F5F5F5",
'100': "#F9F9FA",
white: '#ffffff',
primary: '#9179ff',
'primary-light': '#a696ff',
'primary-dark': '#8369fe',
secondary: '#00d8cb',
'secondary-light': '#00e9db',
error: '#d62738',
'error-light': '#fd4f4c',
'success': '#00e049',
'active': '#4482ff',
'active-light': '#6aa6ff',
}
}