Automatically Change Header Social Link Colour Based on Background

Hi All,

First post so apologies if this is a repeat topic.

I've created a custom link icon for the 2nd link in my headers social link block. Its uploaded and works in the block fine, however I would like it to invert colours automatically so it can be visible on brighter backgrounds. 

Here is my current CSS: 

@media only screen and (min-width:640px) { 
  .header-actions-action--social .icon--fill:nth-of-type(2) {
    svg {
      display:none;
    }    
    background-image: url(https://static1.squarespace.com/static/5ff9e3adfcd25633938fb07d/t/6426fd682bbee81914523c6a/1680276840395/glass.png);     
    background-size: 90%;    
    background-repeat: no-repeat; 
  } 
}

I have tried filter: invert(1); but no luck there. Whilst it did invert the colours it made a permanent change rather than just inverting on brighter backgrounds.

On this page is how the icons display normally: https://jamiecozier.com/

And on a page with a brighter background: https://jamiecozier.com/prints

Any help would be greatly appreciated!

Add to Prints Page Header

<style>
  .header-actions-action--social .icon--fill:nth-of-type(2) {
    filter: invert(1);
}
</style>