css dosyanızı buna uygun şekilde düzenleyip daha sonra tasaımın içtediğiniz kısmına dark/light adlı bir
buton koyarak her kliklendiğinde body'e dark adlı classı eklemesini ve silmesini sağlayabilirsiniz.

.box {
  background: #fff;
}
.form-control {
  background: #eee;
}
body.dark .box {
  background: #000;
}
body.dark .form-control {
  background: #333;
}

Fakat bu zaman sayfa yenilendiğinde tekrardan light tema gözükecektir. Bunun için seçilen temayı localstorage'de bir değere tanımlamamız gerekiyor. ver her defa dom yüklendiğinde localstorageden değeri alıp bodye eklemesi gerekiyor.

document.addEventListener('DOMContentLoaded', () => {
  if (localStorage.getItem("theme") == "dark" && !document.body.classList.contains('dark')) {
    document.body.classList.add(localStorage.getItem("theme"));
  }
});

function changeTheme(){
  if (localStorage.getItem("theme") == "dark") {
    localStorage.setItem("theme","");
    document.body.classList.add('dark');
  }else{
    localStorage.setItem("theme","dark");
    document.body.classList.remove('dark');
  }
}