how to change icon colors on different pages?

how to change icon colors on different pages?

OlaDobson
Visitor
2 0 0

I have a transparent header on my homepage, with light color icons on it (#F3EBE0). on my other pages i have the light color as a background and i would like the icons to be in a darker shade of red (#721817). how can I adjust the colors to be different from the home page?

Thank you

Replies 2 (2)

BSSCommerce-TA
Shopify Partner
123 24 24

hi @OlaDobson , can you give me your store website url.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
OlaDobson
Visitor
2 0 0

hey BSSCommerce, I have already founf the code that will fix it: 

<script>
document.addEventListener('DOMContentLoaded', function() {
const icons = document.querySelectorAll('.icon');
const homepageColor = '#F3EBE0';
const otherPagesColor = '#721817';

if (window.location.pathname === '/') {
icons.forEach(icon => {
icon.style.color = homepageColor;
});
} else {
icons.forEach(icon => {
icon.style.color = otherPagesColor;
});
}
});
</script>