Change background color of IIIF image viewer

[salger1]

We have the image viewer background set to white but when we add IIIF images to the viewer the viewer changes to a black background.

The first two images on this page are IIIF and display with a black background but the third is not IIIF and displays on a white background. Is there somewhere we can update the color of the IIIF viewer?

This is what we have on the variables.scss:

// Image viewer (pop-up figure viewer & entry page viewer)
// -----------------------------------------------------------------------------
$quire-entry-header-height: 4.5rem;

$quire-entry-image-color: $white;
$quire-entry-image-icons-color: $white;

[Erin-Cecele]

Hi @salger1, we've come across this before. The black background is erroneously caused by a third party dependency (Canvas Panel - a web component that renders a IIIF Canvas) which is somehow overwriting the variables.scss file. To fix it, you need to add the line of code below to your custom.css which applies the change to the root of the project. Please let us know if it works.

:root {
  --atlas-background: white;
}

[salger1]

Looks like that did the trick! Thank you Erin!

[Erin-Cecele]

Wonderful news!