Skip to content
On this page

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.

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