Смена иконки, смена темы(окраски страницы) по нажатию

Question

У меня 2 вопроса:

как при нажатии на черный полумесяц вся страница была черной, а не только блок где я его вставил, потому что когда вставляю это туда где есть header, с боковая панель они остаются своего цвета и не меняются.
Как заменить эту иконку на белую после нажатия

вот разметка:

body {
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 25px;
}

.dark-mode {
  background-color: black;
  color: white;
}

<button onclick="myFunction()"><img src="https://img.icons8.com/external-bearicons-glyph-bearicons/344/external-moon-halloween-bearicons-glyph-bearicons.png" style="width: 10%; height: 10%;"></button>

<script>
  function myFunction() {
    var element = document.body;
    element.classList.toggle("dark-mode");
  }
</script>

Answer 1

Попробуйте добавить фильтр с инверсией:

function myFunction() {
  var element = document.body;
  element.classList.toggle("dark-mode");
}

body {
  padding: 25px;
  font-size: 25px;
  color: black;
  background-color: white;
}

.dark-mode {
  background-color: black;
  color: white;
  filter: invert(1);
}

<button onclick="myFunction()"><img src="https://img.icons8.com/external-bearicons-glyph-bearicons/344/external-moon-halloween-bearicons-glyph-bearicons.png" style="width: 10%; height: 10%;"></button>

Answer 2

Вы можете рассмотреть вариант переключения с тёмной темы на светлую с помощью кнопки:

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 === "Ночь") {
    document.body.style.background = "black";
    this.innerHTML = "День";
    logo.src = darkImageURL;
  }
  else {
    document.body.style.background = "white";
    this.innerHTML = "Ночь";
    logo.src = lightImageURL;
  }
});

<body>
  <button id="toggleButton">Ночь</button>

  <img id="logo" class="nav_logo" src="https://i.stack.imgur.com/kJSxu.png" alt="original logo" width="100" height="100"/>
</body>

Источник

БЛОГ НА HUSL

Смена иконки, смена темы(окраски страницы) по нажатию

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