<input id="daynight" type="checkbox">
  <label for="daynight" class="fa fa-sun"></label>
  <script src="https://kit.fontawesome.com/997cd69c9a.js" crossorigin="anonymous"></script>

body {
  background-color: white;
  color: black;
}

body[dark] {
  background-color: black;
  color: white;
}

#daynight {
  display: none;
}

#daynight + label {
  cursor: pointer;
}

#daynight + label::before {
  content: "\f186";
}

#daynight:checked + label::before {
  content: "\f185";
}

const body = document.querySelector('body');
document.querySelector('#daynight').addEventListener(
  'change',
  (e) => {
    body.toggleAttribute('dark', e.target.checked);
  }
)