Backdrop and background coloring

In this guide, we will tell you how to change the backdrop and background color for Modals and Fullscreens and how to adjust the color transparency.

Backdrop

The backdrop can be changed for the Modals only. To modify it, set the necessary color for the property to the :host element.

:host {
  background: #bcbfec;
}

The color value can be specified in the text format as well.

:host {
  background: pink;
}

If you’d like to set a semi-transparent color, you should use the RGBA color format where A stands for the color transparency. It should be specified in percentages.

:host {
  background: rgba(198, 191, 236, 50%);
}

Background

In the Theme section, you can change the background as for Modals, as well as for Fullscreens. Here it’s also possible to pick the color out, and find the colors used in the image itself (if there is one). With the help of the abovementioned A parameter, adjust the color transparency.

Here you can see how it works for Modals:

On this screenshot, you can see how to set it for Fullscreens: