Проблема с переключением цвета логотипа в темный режим

Question

У меня есть логотип черного цвета для моего портфолио, и я хотел бы переключить его на белый в темном режиме. https://www.paulinerouger.com/

Я пытался сделать:

Используя CSS переменные:

<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);
  }

Сделать с помощью SVG

<img class="nav_logo" src="assets/img/PR_logo.svg" id="svg" alt="PR Logo">


.nav_logo {
    fill: currentColor;
}

К сожалению, ничего из вышеперечисленного не сработало.
Любое предложение решения задачи?

_{Свободный перевод вопроса Switch Logo color in Dark Mode issue от участника @PaulineTW.}

Answer 1

Если вы рассматриваете решение на основе JS, вы можете использовать подход, который я разработал ниже.
Щелчок по кнопке изменяет как атрибут src элемента <img>, так и стиль background-color элемента <body>.

let button = document.getElementById('toggleButton');
let logo = document.getElementById('logo');

let darkImageURL = "https://i.stack.imgur.com/DuKoK.png";
let lightImageURL = "https://i.stack.imgur.com/kJSxu.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://i.stack.imgur.com/kJSxu.png" alt="original logo" width="100" height="100"/>
</body>

_{Свободный перевод ответа от участника @Sercan.}

Answer 2

Можно воспользоваться свойством content, которому можно задать значение с помощью css-переменных.

Например:

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);
  display: inline-block;
}

<body>
  <button id="toggleButton">Dark</button>

  <img id="logo" class="nav_logo" alt="original logo" width="100" height="100" />
</body>

БЛОГ НА HUSL

Проблема с переключением цвета логотипа в темный режим

Ответы (2 шт):