Светлый и темный режимы

Question

Помогите пожалуйста! Я хочу сделать темный режим на сайте, узнал об одной фишке, а именно про filter: invert(1); (что это свойство меняет все элементы на противоположные цвета). Попробовал сделать и все получилось, но я не могу изменять ничего в этом "ночном режиме", так как если я пропишу для какой-то из картинок, чтобы при клике на light все стало invert(1), а у imgLogo чтоб значение этого filter было none. Но оно не работает, подскажите, что я делаю не так!

let pageElements = document.querySelector('*');
let light = document.querySelector('.mode-day');
let dark = document.querySelector('.mode-night');
let imgLogo = document.querySelector('.logo-foto');

light.onclick = function() {
  pageElements.style.filter = "invert(1)";
  imgLogo.style.filter = "none";
  light.style.display = "none";
  dark.style.display = "flex";
}

dark.onclick = function() {
  pageElements.style.filter = "none";
  light.style.display = "flex";
  dark.style.display = "none";
}

Answer 1

document.querySelector('button').addEventListener('click', function () {
  document.body.classList.toggle('invert')
})

html, body {
  background: white;
  height: 100%;
  margin: 0;
  overflow: auto;
}

body.invert, body.invert img {
  filter: invert(1);
}

<p>Инвертировать надо только body и картинки
<p>А остальное - не надо.
<p>Вот: <button>invert</button>

БЛОГ НА HUSL

Светлый и темный режимы

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