Here is the description of the color keys that are available
unlayer.init({
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: {
primary_11: '#441e42', // Background Color for Tool bar
primary_10: '#4e2e51', // Color for the Tool Tiles, active buttons, preview buttons
primary_09: '#3c263d', // Color for Side and Top panel of the editor, Background color of Property Editor and text editor, Background color of Preview Window.
primary_08: '#4f344d', // Border of the editor cavas, side and top bar, Tool Icons and Spinner Loading Screen, Property Editors, and Text Editor, Hover effect for Unlayer default buttons.
primary_07: '#5d425c', // Border of the property editor input fields, color when a button is selected.
primary_06: '#906994', // "More Options" trigger of property Editors
primary_05: '#9c95a6', // Color of '+' and '-' buttons for property editors, text Editor fields,
primary_04: '#d2c2d6', // Tool Icons and Description Color, Property Editor Options Text, and Body Values
primary_03: '#e8dded', // Side Bar Icons and Description Color
primary_02: '#f2ebf4', // Pop-up color when hovered on a default button, Property Editor Title.
primary_01: '#ffffff', // "Drop it here" Pop-up text color
accent_01: '#9632a0', // Highlight color when hovered on a row.
accent_02: '#ae70b4', // Color of the text when no tool is added "No Content Here"
accent_03: '#bf87c4', // Color of '+' button to add more rows.
accent_04: '#d9b4dc', // Color of the line which shows where the tool is being added.
accent_05: '#eed5f0' // Warnings and Alerts
},
},
},
},
});