Hi @mikehindle,
You can use this global CSS. It should fix the issue.
body.darkmode--activated #glightbox-slider .gslide-image {
filter: invert(1);
}
In “Appearance” > “Editor” > Click anywhere on the page. It will open the block editor view.
Then, click on 3 dots beside “Styles” > “Additional CSS”, paste the above CSS code and click “Save”.
You may also use “Additional CSS” field in the customizer instead.
In the URL, your domain and then /wp-admin/customize.php?autofocus[section]=custom_css
Thanks for the speedy reply, Shubham.
That has almost worked, other than the shadow of the lightbox, which is still inverted. Is there any way that you know of to un-invert that bit?
In the previous CSS, you would add another line, so it would be:
body.darkmode--activated #glightbox-slider .gslide-image {
--glightbox-image-shadow: 1px 2px 9px 0px rgba(255, 255, 255, 0.65);
filter: invert(1);
}
In the above value, you can adjust this value: rgba(255, 255, 255, 0.65)
CSS with possible values:
body.darkmode--activated #glightbox-slider .gslide-image {
--glightbox-image-shadow: 1px 2px 9px 0px rgba(0, 0, 0, 0.25);
filter: invert(1);
}
body.darkmode--activated #glightbox-slider .gslide-image {
--glightbox-image-shadow: 1px 2px 9px 0px rgba(0, 0, 0, 0.40);
filter: invert(1);
}
body.darkmode--activated #glightbox-slider .gslide-image {
--glightbox-image-shadow: 1px 2px 9px 0px rgba(255, 255, 255, 0.35);
filter: invert(1);
}
Amazing! This is now working perfectly.
Really appreciate your help on this one.
Thank you.
