Different Logo on Header

[sixdreamz]

Is it possible to have a different logo on my header on my Homepage?

When you enter the site, the logo should be white, when i go further to the other pages to logo should switch to a black version.

thx for any help in advance

[nafeeur10]

You can do it using Javascript path checking.

window.addEventListener("DOMContentLoaded", function() {
  const logo = document.querySelector(".logo");
  const isHomepage = window.location.pathname === "/";

  if (isHomepage || !isHomepage) {
    logo.classList.add("logo--white"); // Add class for white logo
  } else {
    logo.classList.add("logo--black"); // Add class for black logo
  }
});

// Optional: Detect navigation changes (advanced)
window.addEventListener("popstate", function() {
  const logo = document.querySelector(".logo");
  //Change the color of the logo.
});

[sixdreamz]

how do i use this code?

[nafeeur10]

You can use this code on the theme.liquid
Better to create an asset js file, and then paste it.

[sixdreamz]

but where do i put my png files?

url: sixdreamz.com

[nafeeur10]

Upload photo/icon here.
Then Preview and edit > Copy image address. 
You will get the shopify cdn address. Use that. 

[sixdreamz]

like this?

now add the link inside the brackets?

[nafeeur10]

That code is for adding a css class.
Not for adding images. 

<img id="imageID" alt="Image" class="logo" />

const logo = document.querySelector(".logo");
logo.src="image_url_black_or_white_which_will_be_used_for_homepage";

const isHomepage = window.location.pathname === "/";

if(!isHomepage)
{
  logo.src="change_the_image";
}

[sixdreamz]

so i just copy this in my js file which i made.

and then i copy the css code into theme.liquid?

[nafeeur10]

If both files are images (black and white icons), you don't need CSS.