We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this workaround.

The lightbox feature is available in the "Image" and "Gallery Grid" modules. With this guide, you can change the background color, control the opacity of the background, and remove or change the color of the controls.

To add the custom code go to the "Customize" > "Advanced" > "Custom CSS" and paste the code snippet of your choice in "Edit Custom CSS".

Change the Background Color

.pswp__bg {
  background: white !important;
}

This code will make your background white. You can change the color value to any color you like.

Change Background Opacity

.pswp__bg {
  opacity: 0.5 !important;
}

Change the Header Background Color

.pswp__top-bar {
  background: black !important;
}

This code will make your header background black. You can change the color value to any color you like. If you don't want the background color at all, simply change the color value "black" to "transparent".

Change Header Icon Color to Black

.pswp__button {
  filter: invert(1) !important;
}