Backdrop and background coloring

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

Modal background-color

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

:host {
  background: pink;
}

The color value can be specified in the text format

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

Semi-transparent background color in the RGBA format

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:

Colors in the Theme section

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

Adjusting the fullscreen background in the Theme section

Browse by category