Skip to content

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 Unlayer.

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

unlayer.init({
  //.. init config goes here ..,
  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'
    }
  }
});

Theme

We currently have 2 themes available

Light Mode (Default)

unlayer.init({
  //.. init config goes here ..,
  appearance: {
    theme: 'light'
  }
});

Light Mode

Dark Mode

unlayer.init({
  //.. init config goes here ..,
  appearance: {
    theme: 'dark'
  }
});

Dark Mode


Tools Panel

Right Side (Default)

unlayer.init({
  //.. init config goes here ..,
  appearance: {
    panels: {
      tools: {
        dock: 'right'
      }
    }
  }
});

Right Panel

Left Side

unlayer.init({
  //.. init config goes here ..,
  appearance: {
    panels: {
      tools: {
        dock: 'left'
      }
    }
  }
});

Left Panel


What's Next?

Manage Tools