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({ ... });
Property | Description | Type | Default |
---|---|---|---|
mode | Theme mode (default, dark) | default dark | default |
palette | Object containing key-value pairs for colors | object | {} |
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.
[...]
}
Property | Description | Type | Default |
---|---|---|---|
dock | Position of the tools panel (left, right) | left right | left |
compact | Enable compact UI for tools panel | boolean | false |
panels: {
tools: {
dock: "right", // Move tools panel to the right
compact: true, // Enable compact layout
},
}