Dark mode 2: Style toggle-switchen

Opgavebeskrivelse

Gør checkboxen til en rigtig toggle-switch, så dark mode ser mere færdig ud.

<label>
  <span class="visually-hidden">Theme</span>
  <input id="theme-toggle" type="checkbox">
</label>
<section>
  <h1>Light/Dark mode with JavaScript</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, dignissimos. Consectetur, suscipit delectus eos officia maiores, est, assumenda earum corporis nisi exercitationem tempore corrupti odit. Incidunt mollitia tenetur ratione ipsa explicabo sit eligendi voluptatum aspernatur! Accusantium incidunt necessitatibus nihil!</p>
</section>

Preview

Hints

#theme-toggle {
  appearance: none;
  width: 3rem;
  height: 2rem;
  border-radius: 9999px;
}

#theme-toggle::before {
  content: "";
  display: block;
}

#theme-toggle:checked::before {
  translate: calc(var(--w) - var(--h));
}

Light/Dark mode with JavaScript

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, dignissimos. Consectetur, suscipit delectus eos officia maiores, est, assumenda earum corporis nisi exercitationem tempore corrupti odit. Incidunt mollitia tenetur ratione ipsa explicabo sit eligendi voluptatum aspernatur! Accusantium incidunt necessitatibus nihil!