¿Customize tiktok icon in two versions depending on the background?

Site URL: https://www.horaciomarchand.com

Hello! I found a code to change the icon of a regular link for the tiktok symbol, now I want to change it to white when the background is dark (purple). Here is the code im using. Thanks in advanced for your help! 

.icon[aria-label="URL"] svg {
  visibility:hidden;
}
.icon[aria-label="URL"] {
background-image: url(https://static1.squarespace.com/static/5e39efbd7236283156444451/t/5fab162af50c1a71c9cb7043/1605047850479/tiktok_grandeicon.png);
    background-size: cover;
    background-repeat: no-repeat;
    transform:scale(1);
}

.sqs-svg-icon--wrapper.url div {
    visibility: hidden;
}
.sqs-svg-icon--wrapper.url {
    background-image: url(https://static1.squarespace.com/static/5e39efbd7236283156444451/t/5fab162af50c1a71c9cb7043/1605047850479/tiktok_grandeicon.png);
    background-size: cover;
    background-repeat: no-repeat;
}

Here is example on a specfic section, footer

section[data-section-id="5ea368d4695b01524ef6dd9d"] a[href*='tiktok'].url {
	    filter: brightness(0) invert(1);
}

<a href="https://www.stzgists.com/today-tv-series/">TikTok</a> really took the world by storm all of a sudden they gain popularity overnight and till now <a href="https://www.stzgists.com/loki-tv-series-release-dates/">TikTok</a> is still going strong, all my children are on TikTok they even sleep and wake on this app the owners must be making a shit ton of money.

On 11/11/2020 at 1:16 AM, bangank36 said:

Here is example on a specfic section, footer

section[data-section-id="5ea368d4695b01524ef6dd9d"] a[href*='tiktok'].url {
	    filter: brightness(0) invert(1);
}

 

Assuming you're using 7.1, I would make a slight adjustment to this and use

.dark,.dark-bold,.black,.black-bold{
a[href*='tiktok'].url {
filter: brightness(0) invert(1);
}
}

This will then automatically apply the colour change so that when used on any dark section on the site, the icon will become white. Rather than needing to use multiple sectionids.

10 hours ago, Kwamzilla said:

Assuming you're using 7.1, I would make a slight adjustment to this and use

.dark,.dark-bold,.black,.black-bold{
a[href*='tiktok'].url {
filter: brightness(0) invert(1);
}
}

This will then automatically apply the colour change so that when used on any dark section on the site, the icon will become white. Rather than needing to use multiple sectionids.

That brilliant

On 6/19/2021 at 12:33 AM, bangank36 said:

That brilliant

Nah man, you came up with the solution, I was just supporting!