Change the Logo based on slide background

I have a website and on homepage it's using different shade images in a slideshow. I want to change the logo based on slide background. 

How can I do that?

website homepage: https://broccoli-giraffe-f283.squarespace.com/new-index

SS changes this class name on each slide

so you can use this below code to change logo, replace Pixabay with new image url

/* Light */
div#canvas.color-weight-light .logo-image img {
    content: url(https://cdn.pixabay.com/photo/2023/05/26/15/52/buttterfly-8019730_1280.jpg);
}
/* Dark */
div#canvas.color-weight-dark .logo-image img {
    content: url(https://cdn.pixabay.com/photo/2023/10/12/08/32/giraffe-8310206_1280.jpg);
}