Site logo colour/version change for different pages and mobile?

Please can someone help us :-) with out draft website design for a new Nordic inspired holiday home >> https://fennel-dragonfly-prjz.squarespace.com

Our 'Nordic Farmhouse' logo is white on the home page on a full image but we'd like a black or grey version on the other pages as the white doesn't show up on a white background obviously.

I've been given this answer by support, when I paste this CSS code in my white logo turns black on the homepage and I want it to turn black on other pages? Is there an easy way to update the code for only the pages I'd like to invert the colour?

Answer provided by SS support >>

https://answers.squarespace.com/questions/204948/changing-logo-colour-on-different-page.html

ie can I update the first line from .homepage .Header-branding-logo { to .gallery...etc for example? I can't work it out?

.homepage .Header-branding-logo { -webkit-filter: invert(100%); filter: invert(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1'); }

@wossy Each page have different ID (It will be body#abcxyz098234098345). You can replace .homepage with Page ID.

See how to find Page ID. https://beaverhero.com/squarespace-how-to/#HowtoFindPageID