Invert Logo Color Depending on Page Background

Hi, I'd like to have my logo be white on my home page and black or another dark color on the other pages of my website that have light backgrounds. Is there any custom code that will allow me to invert the color on the other pages?

I'm using the Margot template.

Thanks!

Go here for the answer - 

Rather, do the opposite and invert the colour on your home page. What I have done on Forte:

<style>
 body.collection-type-index .color-weight-dark #logo img {
   -webkit-filter: invert(100%);

</style>

[home page] => Page Settings => Advanced

Ling.

On 2/13/2020 at 2:42 AM, Lingwisyer said:

Rather, do the opposite and invert the colour on your home page. What I have done on Forte:

<style>
 body.collection-type-index .color-weight-dark #logo img {
   -webkit-filter: invert(100%);

</style>

[home page] => Page Settings => Advanced

 

Ling.

Hi, 

I faced the same issue on my website ( www.gabrielefranchini.it PW: gf2021 ), thanks to your code and by changing it a little bit (from .color-weight-dark to .color-weight-light ) I was able to invert logo color on indexes that uses only white background such as this one: https://www.gabrielefranchini.it/projects/ariete

But when a background is just gray, or when a grey, a white and a black background follow one another, it tends to see gray as light enough and invert logo color. 

Is there a way to set the code to a certain rate amount of light/dark to make it works even better? On my homepage I couldn't use it since it recognize a few grey background as clear.

Thank you!