Как активировать темную тему при нажатии на чекбокс?

Question

Как можно реализовать активацию этих стилей:

  .wrapper, .squeare {
    filter: invert(100%);
  } 
  .header, img, video {
    filter: invert(100%);
  }

по нажатию на чекбокс?

.wrapper {
  background: #fff;
  width: 350px;
  padding: 25px;
  border: 2px solid black;
}

.header {
  width: 300px;
  height: 50px;
  background-image: url(https://www.abcfact.ru/upload/001/u107/342/b1866ffb.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.squere {
  width: 30px;
  height: 30px;
  background-color: #fff;
  float: right;
  margin: 10px;
}

.text {
  width: 300px;
  background-color: #e2e2e2;
}

.text h1 {
  font-size: 25px;
}

<div class="wrapper">
  <input type="checkbox" id="themer">
  <div class="header">
    <div class="squere"></div>
  </div>
  <div class="text">
    <h1>Lorem ipsum dolor.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, possimus!</p>
  </div>
</div>

Answer 1

Никогда ничего подобного не делал, но вот что придумал :

document.getElementById('themer').addEventListener('change', e =>
  e.target.closest('.wrapper').classList.toggle('dark')
)

.wrapper.dark,
.wrapper.dark .squere,
.wrapper.dark .header,
.wrapper.dark img,
.wrapper.dark video {
  filter: invert(100%);
}

.wrapper {
  background: #fff;
  width: 350px;
  padding: 25px;
  border: 2px solid black;
}

.header {
  width: 300px;
  height: 50px;
  background-image: url(https://www.abcfact.ru/upload/001/u107/342/b1866ffb.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.squere {
  width: 30px;
  height: 30px;
  background-color: #fff;
  float: right;
  margin: 10px;
}

.text {
  width: 300px;
  background-color: #e2e2e2;
}

.text h1 {
  font-size: 25px;
}

<div class="wrapper">
  <input type="checkbox" id="themer">
  <div class="header">
    <div class="squere"></div>
  </div>
  <div class="text">
    <h1>Lorem ipsum dolor.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, possimus!</p>
  </div>
</div>

Answer 2

Решение на CSS:

.block {
  position: relative;
}

.block>input[type="checkbox"] {
  position: absolute;
  left: 25px;
  top: 25px;
  z-index: 2;
}

.wrapper {
  background: #fff;
  width: 350px;
  padding: 44px 25px 25px 25px;
  border: 2px solid black;
}

.header {
  width: 300px;
  height: 50px;
  background-image: url(https://www.abcfact.ru/upload/001/u107/342/b1866ffb.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.squere {
  width: 30px;
  height: 30px;
  background-color: #fff;
  float: right;
  margin: 10px;
}

.text {
  width: 300px;
  background-color: #e2e2e2;
}

.text h1 {
  font-size: 25px;
}

.block>input[type="checkbox"]:checked+div.wrapper,
.block>input[type="checkbox"]:checked+div.wrapper .header,
.block>input[type="checkbox"]:checked+div.wrapper .squere,
.block>input[type="checkbox"]:checked+div.wrapper img,
.block>input[type="checkbox"]:checked+div.wrapper video {
  filter: invert(100%);
}

<div class="block">
  <input type="checkbox" id="themer">
  <div class="wrapper">
    <div class="header">
      <div class="squere"></div>
    </div>
    <div class="text">
      <h1>Lorem ipsum dolor.</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, possimus!</p>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как активировать темную тему при нажатии на чекбокс?

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