Custom Theme object

In this example we will set the editor theme to a custom object, modifying the colors of all components at once.

Preview

Code

unlayer.init({
  id: 'editor',
  displayMode: 'email',
  appearance: {
    theme: {
      name: 'custom_modern_dark_purple',
      extends: 'modern_dark',
      isClassic: false,
      isDark: true,
      mapping: {
        borderRadius: {
          none: '0',
          min: '2px',
          mid: '8px',
          max: '12px',
          full: '50%',
        },
        colors: {
          accent_01: '#9632a0',
          accent_02: '#ae70b4',
          accent_03: '#bf87c4',
          accent_04: '#d9b4dc',
          accent_05: '#eed5f0',
          primary_01: '#ffffff',
          primary_02: '#f2ebf4',
          primary_03: '#e8dded',
          primary_04: '#d2c2d6',
          primary_05: '#9c95a6',
          primary_06: '#906994',
          primary_07: '#5d425c',
          primary_08: '#4f344d',
          primary_09: '#3c263d',
          primary_10: '#4e2e51',
          primary_11: '#441e42',
        },
      },
    },
  },
});