Invert lightbox colors

Sorry, the forum is not permitting .MP4 video files as attachments, so I’ve converted the video to animated .GIF

Hi, the site is not live yet… However, you can check it on your own demos, if you set a lighter pswp__bg background color (preferably white, of course). I’m attaching a screenshot with this attribute changed on your default demo via Chrome’s DevTools and the same resulting gray rectangle on the hoover active area.

.pswp__bg {
  background: white;
}

Well, unfortunately the above code is not working – you can indeed change the background hot zone color using this property (to any color), but I guess the animation/transition is placing this gray color/transparency somehow…

I got a working solution, but sometimes you can’t have the cake and eat it, too. I wanted a black top bar, but I settled for very light gray instead to have visible buttons, otherwise they are black on black (because of the invert property). Here is the code I’m using:

/* Lightbox White Background Below (pswp) */

.pswp__bg {
    background-color: white;
}

.pswp__img--placeholder--blank {
  background: none;
}

.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption {
    background-color: rgba(0,0,0,.1);
}

.pswp--css_animation .pswp__preloader__donut {
    border: 2px solid #000;
}

button.pswp__button--arrow--left::before, button.pswp__button--arrow--right::before {
 background-color: #90083C;
}

.pswp__button, .pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
    filter: invert(100%);
}

.pswp__top-bar .pswp__name,
.pswp__caption__center {
    color: black;
}

.pswp__counter {
    color: black;
}