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'
      }
    }
  }
});

Collapsible

The tools panel can be collapsed by default. You can disable this feature if you want.

unlayer.init({
  appearance: {
    panels: {
      tools: {
        collapsible: false
      }
    }
  }
});

Loading Spinner

You can change our default loading spinner and add a custom one. You can either use an animated image, or a pure HTML/CSS loader.

Animated Image

unlayer.init({
  appearance: {
    loader: {
      url: 'IMAGE URL FOR LOADER'
    }
  }
});

CSS Loader

unlayer.init({
  appearance: {
    loader: {
      html: '<div class="custom-spinner"></div>',
      css: '.custom-spinner { color: red; }'
    }
  }
});