Custom Theme object

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

Purple Theme example

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

Theme Functions

You can also use the built-in functions fade, darken and lighten in your theme variables, as well as create any new variable you want inside the mapping field, which can then be referenced later. Here's an example for a blue theme:

Code

unlayer.init({
  id: 'editor',
  displayMode: 'email',
  appearance: {
    theme: {
      name: 'custom_modern_dark_blue',
      extends: 'modern_dark',
      isClassic: false,
      isDark: true,
      mapping: {
        colors: {
          base_primary_color: '#121826',
          primary_01: 'lighten(95%, {base_primary_color})',
          primary_02: 'lighten(87%, {base_primary_color})',
          primary_03: 'lighten(85%, {base_primary_color})',
          primary_04: 'lighten(75%, {base_primary_color})',
          primary_05: 'lighten(58%, {base_primary_color})',
          primary_06: 'lighten(40%, {base_primary_color})',
          primary_07: 'lighten(25%, {base_primary_color})',
          primary_08: 'lighten(15%, {base_primary_color})',
          primary_09: 'lighten(6%, {base_primary_color})',
          primary_10: 'lighten(3%, {base_primary_color})',
          primary_11: 'lighten(0%, {base_primary_color})',
        },
      },
    },
  },
});