I have a black color logo for my portfolio and i would like to switch it white when Dark Mode : https://www.paulinerouger.com/
I have tried:
<img class="nav_logo" src="assets/img/PR_logo.png" alt="original logo" />
body {
--nav_logo: url(PR_logo.png) no-repeat;
}
body[data-theme="dark"] {
--nav_logo: url(PR_logo_white.png) no-repeat;
}
.nav_logo {
background: var(--nav_logo);
}
<img class="nav_logo" src="assets/img/PR_logo.svg" id="svg" alt="PR Logo">
.nav_logo {
fill: currentColor;
}
Unfortunately none of the above has worked. Any suggestion?
change stroke="#000" in your svg to stroke="currentColor"
body.dark-theme .nav__logo{
color: #FFFFFF;
}
If you are considering a JS-based solution, you can use the approach I developed below. Clicking the toggle button changes both the src attribute of the <img> element and the background-color style of the <body> element.
let button = document.getElementById('toggleButton');
let logo = document.getElementById('logo');
let darkImageURL = "https://cdn-icons-png.flaticon.com/512/196/196685.png";
let lightImageURL = "https://cdn-icons-png.flaticon.com/512/169/169367.png";
button.addEventListener('click', function(event) {
if(this.innerHTML === "Dark") {
document.body.style.background = "black";
this.innerHTML = "Light";
logo.src = darkImageURL;
}
else {
document.body.style.background = "white";
this.innerHTML = "Dark";
logo.src = lightImageURL;
}
});<body>
<button id="toggleButton">Dark</button>
<img id="logo" class="nav_logo" src="https://cdn-icons-png.flaticon.com/512/169/169367.png" alt="original logo" width="100" height="100"/>
</body>You can use css variables with content property for img
document.getElementById('toggleButton').addEventListener('click', function(event) {
if (this.innerHTML === "Dark") {
document.body.dataset.theme = "dark";
this.innerHTML = "Light";
} else {
document.body.dataset.theme = "light";
this.innerHTML = "Dark";
}
});body {
--nav_logo: url('https://cdn-icons-png.flaticon.com/512/169/169367.png');
}
body[data-theme="dark"] {
--nav_logo: url('https://cdn-icons-png.flaticon.com/512/196/196685.png');
}
.nav_logo {
content: var(--nav_logo);
}<body>
<button id="toggleButton">Dark</button>
<img id="logo" class="nav_logo" src="https://cdn-icons-png.flaticon.com/512/169/169367.png" alt="original logo" width="100" height="100" />
</body>