Show a custom icon color based on light/dark theme

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

I have added a whatsapp icon to my header and menu, it displays fine in light themes where the background is white and the icon is black. I have created the same logo in white for dark backgrounds. Can anyone help me out with the custom css to switch the logo color based on the dark/light theme. Thanks!

Hi. It looks like you solved this?

@tuanphan Also looking to do this for adding a Substack logo the social icons. I have been able to add it in in one color but I want it to shift from white to blue based on light or dark setting. & in mobile popup menu

dark theme: https://www.melinahammer.com/

light theme:  https://www.melinahammer.com/book

pw: melina

Want it as-is (White) here:

Want it to be blue here:

On 3/30/2022 at 2:07 AM, unavolta said:

@tuanphan Also looking to do this for adding a Substack logo the social icons. I have been able to add it in in one color but I want it to shift from white to blue based on light or dark setting. & in mobile popup menu

dark theme: https://www.melinahammer.com/

light theme:  https://www.melinahammer.com/book

pw: melina

Want it as-is (White) here:

 

Want it to be blue here:

#1. To change it to black on Book Page Header

add this code into Book Page header

<style>
  .header-actions-action a[href*="substack"] {
    filter: invert(1);
    -webkit-filter: invert(1);
}
</style>

#2. To add substack on Mobile Menu Overlay, add this to Design > Custom CSS

header#header a.icon[href*="substack"] svg {
    display: none;
}
header#header a.icon[href*="substack"] {
    background-image: url(https://static1.squarespace.com/static/61e7443d8270c01ce2239916/t/623ba7cba0a6a72aa3882777/1648076747954/substack2.png);
    background-size: 100%;
    background-repeat: no-repeat;
}
body.header--menu-open header#header a.icon[href*="substack"] {
	filter: invert(1);
	-webkit-filter: invert(1);
}

10 hours ago, tuanphan said:

#1. To change it to black on Book Page Header

add this code into Book Page header

<style>
  .header-actions-action a[href*="substack"] {
    filter: invert(1);
    -webkit-filter: invert(1);
}
</style>

#2. To add substack on Mobile Menu Overlay, add this to Design > Custom CSS

header#header a.icon[href*="substack"] svg {
    display: none;
}
header#header a.icon[href*="substack"] {
    background-image: url(https://static1.squarespace.com/static/61e7443d8270c01ce2239916/t/623ba7cba0a6a72aa3882777/1648076747954/substack2.png);
    background-size: 100%;
    background-repeat: no-repeat;
}
body.header--menu-open header#header a.icon[href*="substack"] {
	filter: invert(1);
	-webkit-filter: invert(1);
}

 

@tuanphanThanks! Close - 

Part 1) I got it to work to #15284C on the mobile menu by removing the body.header section and changing the URL to a new .PNG of the #15284C file 

Code:

//substack color on mobile menu only//
@media screen and (max-width:767px) {
header#header a.icon[href*="substack"] svg {
    display: none;
}
header#header a.icon[href*="substack"] {
    background-image: url(https://static1.squarespace.com/static/61e7443d8270c01ce2239916/t/6240b25db51f1159dbbe011b/1648407133383/substack2_blue.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }}

Part 2) but in the header on light mode on certain pages like Book I want it to be the color #15284C, not black. I tried adjusting a few filters but can't get the right color or change the direct URL of the icon like for the mobile menu.

#15284C URL: https://static1.squarespace.com/static/61e7443d8270c01ce2239916/t/6240b25db51f1159dbbe011b/1648407133383/substack2_blue.png

On 4/1/2022 at 10:53 AM, unavolta said:

@tuanphanThanks! Close - 

Part 1) I got it to work to #15284C on the mobile menu by removing the body.header section and changing the URL to a new .PNG of the #15284C file 

Code:

//substack color on mobile menu only//
@media screen and (max-width:767px) {
header#header a.icon[href*="substack"] svg {
    display: none;
}
header#header a.icon[href*="substack"] {
    background-image: url(https://static1.squarespace.com/static/61e7443d8270c01ce2239916/t/6240b25db51f1159dbbe011b/1648407133383/substack2_blue.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }}

Part 2) but in the header on light mode on certain pages like Book I want it to be the color #15284C, not black. I tried adjusting a few filters but can't get the right color or change the direct URL of the icon like for the mobile menu.

#15284C URL: https://static1.squarespace.com/static/61e7443d8270c01ce2239916/t/6240b25db51f1159dbbe011b/1648407133383/substack2_blue.png

 

@tuanphanI figured it out 🙂

and got it to work in header on the specific pages I wanted with this code in the page header code injection:

<style>
  .header-actions-action a[href*="substack"] {
    background-image: url(https://static1.squarespace.com/static/61e7443d8270c01ce2239916/t/6240b25db51f1159dbbe011b/1648407133383/substack2_blue.png);    
}
</style>

and on the social icon list in a specific block with this code in custom CSS:

div #block-bf044cab69af258d3349 { 
  .sqs-svg-icon--list a:nth-of-type(3){
     background-image: url(https://static1.squarespace.com/static/61e7443d8270c01ce2239916/t/6240b25db51f1159dbbe011b/1648407133383/substack2_blue.png);    
  } }