Tengo un logotipo de color negro para mi cartera y me gustaría cambiarlo a blanco cuando esté en modo oscuro: https://www.paulinerouger.com/
Yo he tratado:
<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; }Desafortunadamente nada de lo anterior ha funcionado. ¿Cualquier sugerencia?
cambie trazo="#000" en su svg a trazo="color actual"
body.dark-theme .nav__logo{ color: #FFFFFF; }Si está considerando una solución basada en JS, puede usar el enfoque que desarrollé a continuación. Al hacer clic en el botón de alternancia, se cambia tanto el atributo src del elemento <img> como el estilo de background-color elemento <body> .
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>Puede usar variables css con propiedad de content para 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>