Appearance

You can customize the appearance of the editor with panel positioning and colors.

Changing Appearance #

There are 2 ways you can change the appearance of MailUi.

1. You can pass the appearance object during initialization like this:

mailui.init({ appearance: { theme: { mode: 'default', palette: { // use all palette keys here }, }, panels: { tools: { dock: "left", // left, right compact: false, }, }, }, });

2. You can change appearance after initialization like this:

mailui.setAppearance({ ... });

Theme Configuration #

The theme section allows you to control the visual theme mode and definecolor palettes.

Theme Options #

PropertyDescriptionTypeDefault
modeTheme mode (default, dark)
default dark
default
paletteObject containing key-value pairs for colorsobject{}

Palette Example #

You can define specific keys inside palette:
palette: { primaryColor: "#7e3bd0", // 🎨 Main brand or primary action color used across key UI components (e.g., buttons, highlights). primaryTextColor: "#ffffff", // 📝 Text color that appears on elements using the primary color background (e.g., button text). bodyBackgroundColor: "#f5f7f7", // 🖥️ Background color for the main application body or canvas. bodyGridColor: "rgba(221, 221, 221, 0.5)", // 📊 Color for grid lines, separators, or visual guides in layouts. [...] }

Available Keys #

You can find all available palette keys here: Default Color Palette

Sidebar Panels Configuration #

You can customize how MailUI's tool panels behave.

Panels Options #

PropertyDescriptionTypeDefault
dockPosition of the tools panel (left, right)
left right
left
compactEnable compact UI for tools panelbooleanfalse

Example Configuration #

You can define specific keys inside palette:
panels: { tools: { dock: "right", // Move tools panel to the right compact: true, // Enable compact layout }, }

Explore Our Email Builder