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 Unlayer.
Option 1) You can pass the appearance object during initialization like this:
unlayer.init({
appearance: {
theme: 'light',
panels: {
tools: {
dock: 'right'
}
}
}
});
Option 2) You can change appearance after initialization like this:
unlayer.setAppearance({
theme: 'light',
panels: {
tools: {
dock: 'right'
}
}
});
Themes
We currently have 2 themes out of the box.
Light Mode (Default)
unlayer.init({
appearance: {
theme: 'light'
}
});


Dark Mode
unlayer.init({
appearance: {
theme: 'dark'
}
});


Tools Position
You can position the tools panel on the right side or the left side.
Right Side (Default)
unlayer.init({
appearance: {
panels: {
tools: {
dock: 'right'
}
}
}
});


Left Side
unlayer.init({
appearance: {
panels: {
tools: {
dock: 'left'
}
}
}
});


Updated about a year ago