MinJieLiu / react-photo-view

An exquisite React photo preview component.
https://react-photo-view.vercel.app
Apache License 2.0
1.49k stars 129 forks source link

Changing the background colour #184

Open David-Slack opened 3 months ago

David-Slack commented 3 months ago

This is a great viewer, just what I was looking for.

However, I'd like to change the background colour without hacking the CSS. At the moment it is black and using maskOpacity={0.5} I can change the transparency, but nothing in the docs for the colour.

Do you have an example of how to do this?

Thanks

David-Slack commented 1 month ago

For anyone here from Google I ended up using CSS:

.PhotoView-Slider__Overlay{
    z-index: 20;
    position: relative;
}
.PhotoView-Portal .PhotoView-Slider__Backdrop{
    background-color: rgb(from var(--accent-colour) r g b / .95) !important;
}
.PhotoView-Portal .PhotoView-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    background: #00000088;
    width: 100%;
    color: #ffffff;
    padding: 5px;
}