دارک مود دارم ولی با رفرش برمیگرده به حالت دیفالت

درود خوبی...
کد زیر:
HTML :

 <div class="form-check form-switch text-center">
            <label class="form-check-label">تاریک / روشن</label>
            <input class="form-check-input" type="checkbox" role="switch" id="darkSwitch" checked>
</div>

CSS:

[data-theme="dark"] {
  background-color: #111 !important;
  color: #eee;
}

[data-theme="dark"] .bg-black {
  background-color: #fff !important;
}

[data-theme="dark"] .bg-dark {
  background-color: #eee !important;
}

[data-theme="dark"] .bg-light {
  background-color: #222 !important;
}

[data-theme="dark"] .bg-white {
  background-color: #000 !important;
}

[data-theme="dark"] .bg-blue {
  background-color: #222 !important;
}

[data-theme="dark"] .card {
  background-color: #222 !important;
}

[data-theme="dark"] .text-bg-light {
  color: #fff !important;
}

[data-theme="dark"] .value {
  color: #fff !important;
}

[data-theme="dark"] .text-muted {
  color: #a4a6a7 !important;
}

[data-theme="dark"] .btn-light {
  background-color: #222 !important;
  color: #fff !important;
}

JavaScript:

var darkSwitch = document.getElementById("darkSwitch");
window.addEventListener("load", function () {
  if (darkSwitch) {
    initTheme();
    darkSwitch.addEventListener("change", function () {
      resetTheme();
    });
  }
});

function initTheme() {
  var darkThemeSelected =
    localStorage.getItem("darkSwitch") !== null &&
    localStorage.getItem("darkSwitch") === "dark";
  darkSwitch.checked = darkThemeSelected;
  darkThemeSelected
    ? document.body.setAttribute("data-theme", "dark")
    : document.body.removeAttribute("data-theme");
}

function resetTheme() {
  if (darkSwitch.checked) {
    document.body.setAttribute("data-theme", "dark");
    localStorage.setItem("darkSwitch", "dark");
  } else {
    document.body.removeAttribute("data-theme");
    localStorage.removeItem("darkSwitch");
  }
}

پیوند زیر:
https://github.com/coliff/dark-mode-switch

توی پروژه ام به کار بردم و کار می کند.