Inverting Site Logo

Hi guys!
Just wondering if anyone knows how to change the logo on different pages?

I've got a white logo at the moment, which works for all the other pages, except the Product pages. I don't want to change the logo to a white box behind a black logo, it would ruin the look of the site!

Does anyone know? Thank you!

My client's website is https://www.raindropon26.com.au/

Password: raindrop2023

Oh my gosh you are amazing, thank you so much!!

I tried with the mobile view however, and that didn't seem to work. Is there another code for that?

This and variations of it aren't quite right:

/* Gift Card logo */
#item-63bba57656086f6c6f308fab {
  .header-title-logo img {
    filter: invert(1);
  }
  @media screen and (max-width: 767px) {.header-title-logo img {
    filter: invert(1);
  }
} }

What can be updated for that to work?

Thank you! 

If you want to do both desktop and mobile on the same page use these instead:

Add this to the page header code injection on the pages you want it reversed:

<style>
  .header-title-logo img, .header .header-title--use-mobile-logo .header-mobile-logo img {filter: invert(1);}
</style>

Or use this CSS with collection IDs:

#item-63bba57656086f6c6f308fab {
  .header-title-logo img, .header .header-title--use-mobile-logo .header-mobile-logo img {
    filter: invert(1);
  }
}

Let me know if that works.

It sure did work!

Thank you so much 🙏🏼