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.

unlayer.init({
  appearance: {
    theme: 'light'
  }
});

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

You can position the tools panel on the right side or the left side.

unlayer.init({
  appearance: {
    panels: {
      tools: {
        dock: 'right'
      }
    }
  }
});

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