How to invert Logo Color on Search Page

Pro Tips Other Tips
1

You can follow these steps to change Logo Color on Search Page.
Note: Use code, you can change logo to white or black color. But if you want to use a different color, you will need to replace it with new logo (I write code below)

#1. To invert Logo to Black Color, use this code to Code Injection > Footer

<script>
if (document.location.pathname.indexOf("/search") == 0) {
    document.querySelector('body').classList.add('t-search')
}
</script>
<style>
body.t-search header#header img {
    filter: brightness(0) invert(0);
}
</style>

image

Result

image

#2. To invert Logo to White Color, use this code to Code Injection > Footer

<script>
if (document.location.pathname.indexOf("/search") == 0) {
    document.querySelector('body').classList.add('t-search')
}
</script>
<style>
body.t-search header#header img {
    filter: brightness(0) invert(1);
}
</style>

image

Result
image

#3. To change it to a new logo, use this new code

<script>
if (document.location.pathname.indexOf("/search") == 0) {
    document.querySelector('body').classList.add('t-search')
}
</script>
<style>
body.t-search header#header img {
    content: url(https://cdn.pixabay.com/photo/2024/08/06/10/43/wine-8949009_1280.jpg);
}
</style>

image