How does Shopify dynamically change the currentColor

Store Design
,
1

The background of the header for our Pipeline-based theme switches between transparent and white. When the background changes, the font color changes too from white to dark by using specifying “color: currentcolor”. How is Shopify changing the currentColor dyamically? Through CSS, I also want to swap a background image at the same time the text color changes. I was hoping some kind of CSS class would be added as things switch from transparent to white but I’m not seeing anything.

2
  1. Locate the theme.scss.liquid file under the “Assets” folder and open it.
  2. Add the following CSS code at the end of the file:
header {
  background-image: url('your-transparent-background-image-url');
  background-repeat: no-repeat;
  background-size: cover;
  transition: background-image 0.3s ease-in-out;
}

header.site-header--light {
  background-image: url('your-white-background-image-url');
  color: white;
}

header .site-header__logo a {
  color: currentColor;
  transition: color 0.3s ease-in-out;
}
​
3

This is the type of thing I’m hoping to do but this did not work. There is no, site-header–light, class added to the header element when the background changes to white. The only class for the header element is, theme-header, regardless of what page is being viewed.

I’ve looked into this further now and I’m currently not seeing any useful class changes I can use. I fear, for the pipeline theme, they are doing it through changes to the styles directly rather than through classes.

4

I just found the solution through looking through the theme.css file. The key is to use [data-header-transparent=false]

In my case, the specific css was:

#hcp_button_wrapper > a {
background-image: url(“https://cdn.shopify.com/s/files/1/0763/5261/8780/files/HCPIconLightBg_430x.png”);
}

[data-header-transparent=false] #hcp_button_wrapper > a {
background-image: url(“https://cdn.shopify.com/s/files/1/0763/5261/8780/files/HCPIconDarkBg_430x.png”);
}