Color changing sticky header when scrolling, transparent to white (dawn theme)

[kaylaemcfadden]

Hello, I want my header to change from transparent with white text and logo to white background with black text and a black logo when hovering, like in this website: https://www.daniellefrankelstudio.com.

My website is lolaatelier.fr

I was able to make it transparent with the white text and logo, and I tried this code below which worked, but it only changed it for my home page and the logo was still white. I need this change to happen to all the pages of my website. Do I need to upload the black version of my logo in the assets? Please help! Thank you

{% if template == 'index' %}
<style>
.scrolled-past-header .header-wrapper {
background-color: #fff;
transition: background-color 800ms ease;
}
.scrolled-past-header .header-wrapper * {
color: #000000; 
transition: color 800ms ease;
}
</style>
{% else %}
<style>
.shopify-section-group-header-group .header-wrapper {
background-color: #fff;  /*your colour choice*/
}
.shopify-section-group-header-group .header-wrapper * {
color: #ffffff;
}
</style>
{% endif %}

[LuffyOnePiece]

@kaylaemcfadden 

Try adding below Css in if condition, Hope this will fix the issue.

.shopify-section-header-sticky.scrolled-past-header .header-wrapper.gradient {
    background: transparent !important;
}