Jump to content

Invert Logo Color Depending on Page Background

Recommended Posts

  • Replies 3
  • Views 4.1k
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 year later...
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:

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


[home page] => Page Settings => Advanced




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!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.