thanks for your helps

when checkbox get checked darkmode working but after page reload darkmode switcher back to light mode and if we store checkbox status in local storage , darkmode switcher wiper from left to right after every page reload

i want switcher stuck in right (darkmode status) when dark mode is on after page reload and i think there is little fliker on page reload

if (window.localStorage.getItem("theme") === "dark-theme"){
    document.documentElement.classList.add("dark-theme")
}

const toggleSwitch = document.querySelector('.toggle');
toggleSwitch.addEventListener("click", function () {
  document.documentElement.classList.toggle("dark-theme")
  if (document.documentElement.classList.contains("dark-theme")) {
      window.localStorage.setItem("theme", "dark-theme")
  } else {
      window.localStorage.setItem("theme", "light-theme")
  }
})

p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
span {
  margin: 0;
  padding: 0;
}

:root {
  --primary-color: #0abead;
  --secondary-color: #f57f17;
  --text-color: #333333;
  --shadow-color-first: rgba(96, 233, 255, 0.27);
  --shadow-color-second: rgba(19, 182, 255, 0.24);
  --shadow-color-third: rgba(4, 195, 255, 0.16);
  --app-bg-color: #fff;
  --section-bg-color: #fff;
  --hover-color: rgba(0, 0, 0, 2%);
  --border-light: rgba(0, 0, 0, 0.1);
  --border-lighter: rgba(0, 0, 0, 0.05);
}

/* Dark Theme */

:root.dark-theme{
  --text-color: #95A5C6;
  --app-bg-color: #161D26;
  --section-bg-color: #1F2935;
}

html {
  font-size: 10px;
}

body {
  font-family: "Ravi";
  font-size: 1.6rem;
  line-height: 1.5;
  background-color: var(--app-bg-color);
  color: var(--text-color);
  height: 100vh;
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style-type: none;
  padding: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* helper classes */

.align-center {
  align-items: center;
}
.skew-reset {
  transform: translateZ(0) skewY(6deg);
}
.full-h {
  height: 100%;
}

/* component */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-color);
  font-family: "Ravi SemiBold";
  color: #fff;
  width: 16rem;
  height: 5rem;
  border-radius: 3rem;
  transition: all 0.3s ease-in;
}

.btn--teal {
  box-shadow: 0 1.6rem 2.9rem rgba(11, 190, 173, 0.41);
}

.btn--orange {
  background-color: var(--secondary-color);
  box-shadow: 0 1.6rem 2.8rem rgba(245, 127, 23, 0.24);
}

.btn--purple {
  background-color: #803afb;
  box-shadow: 0 1.6rem 2.8rem rgba(128, 58, 251, 0.24);
}

.btn--pink {
  background-color: #f5276c;
  box-shadow: 0 1.6rem 2.8rem rgba(245, 39, 108, 0.24);
}

.btn--tiger {
  background-color: #ff6331;
  box-shadow: 0 1.6rem 2.8rem rgba(255, 99, 49, 0.24);
}

.btn:hover {
  transform: translateY(-0.7rem);
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 7rem;
}
.section-head__title {
  font-family: "Ravi Bold";
  font-size: 4.8rem;
  color: var(--primary-color);
}
.section-head__caption {
  color: var(--text-color);
  letter-spacing: 0.2rem;
}
.section-head__line {
  margin-top: 2rem;
  width: 24rem;
  height: 0.2rem;
  background-color: var(--primary-color);
  position: relative;
}

.section-head__line::after {
  content: "";
  position: absolute;
  background-color: var(--primary-color);
  width: 3.9rem;
  height: 1.1rem;
  border-radius: 0.55rem;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

/* ================ */
/*   header start   */
/* ================ */

.header {
  background-color: var(--section-bg-color);
  box-shadow: 0 3px 59px var(--shadow-color-third);
  position: fixed;
  right: 0;
  left: 0;
  z-index: 50;
}

/* Nav Menu */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo {
  color: var(--primary-color);
  font-family: "Ravi Black";
  font-size: 7rem;
  margin: 0;
}
/* Darkmode toggle */

.toggle {
  display: none;
}

.darkmode-toggle__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.5s;
}

.toggle__wrapper {
  width: 80px;
  height: 35px;
  border-radius: 999px;
  background: #f3f3f3;
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.05) inset;
  cursor: pointer;
  position: relative;
  transition: 0.5s;
}

.circle {
  width: 30px;
  height: 30px;
  border-radius: 99px;
  background: white;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.05),
    -10px -10px 30px rgba(0, 0, 0, 0.05) inset;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(10%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: 0.5s;
}

.sun,
.moon {
  width: 25px;
  position: absolute;
  transition: 0.5s;
}
.sun {
  color: #ffd600;
  margin-top: 0%;
  opacity: 1;
}
.moon {
  margin-top: -150%;
  color: white;
  opacity: 0;
}

.toggle:checked + .darkmode-toggle__wrapper .toggle__wrapper {
  background: #1f1f21;
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5) inset;
}
.toggle:checked + .darkmode-toggle__wrapper .toggle__wrapper .circle {
  left: 100%;
  transform: translate(-110%, -50%);
  background: #2c2c2f;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5),
    -10px -10px 30px rgba(0, 0, 0, 0.5) inset;
}
.toggle:checked + .darkmode-toggle__wrapper .toggle__wrapper .circle .sun {
  margin-top: 150%;
  opacity: 0;
}
.toggle:checked + .darkmode-toggle__wrapper .toggle__wrapper .circle .moon {
  margin-top: 0%;
  opacity: 1;
}
.toggle__wrapper:active .circle {
  width: 30px;
}

.nav-menu {
  display: flex;
  flex-wrap: wrap;
}

.nav__menu-item {
  margin-right: 4rem;
  transition: all 0.3s ease;
  border-bottom: 0.3rem solid transparent;
  border-radius: 5px;
}

.nav__menu-link {
  padding-bottom: 0.5rem;
}

.nav__menu-item.active,
.nav__menu-item:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  transition: all 0.3s ease;
}

<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href=".7.2/css/all.min.css"
      integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="./Styles/app.css" />
    <link rel="stylesheet" href="./Styles/responsive.css" />
    <link rel="stylesheet" href="./Styles/swiper-bundle.min.css" />
    <link
      rel="stylesheet"
      href="/[email protected]/css/classic.min.css"
    />
    <title>WebRoots</title>
  </head>
  <body>
    <header class="header">
      <div class="container">
        <nav class="nav">
          <span class="nav__logo">WR</span>
          <div class="darkmode-toggle">
            <input class="toggle" type="checkbox" id="toggle" />
            <div class="darkmode-toggle__wrapper">
              <label class="toggle__wrapper" for="toggle">
                <div class="circle">
                  <svg
                    class="sun"
                    xmlns=""
                    viewBox="0 0 24 24"
                    fill="currentColor"
                  >
                    <path
                      d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z"
                    />
                  </svg>
                  <svg
                    class="moon"
                    xmlns=""
                    viewBox="0 0 24 24"
                    fill="currentColor"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z"
                      clip-rule="evenodd"
                    />
                  </svg>
                </div>
              </label>
            </div>
          </div>

          <ul class="nav-menu">
            <li class="nav__menu-item active" data-section="home">
              <a href="#" class="nav__menu-link">صفحه اصلی</a>
            </li>
            <li class="nav__menu-item" data-section="about-us">
              <a href="#" class="nav__menu-link">درباره ما</a>
            </li>
            <li class="nav__menu-item" data-section="services">
              <a href="#" class="nav__menu-link">سرویس ها</a>
            </li>
            <li class="nav__menu-item" data-section="resume">
              <a href="#" class="nav__menu-link">رزومه</a>
            </li>
            <li class="nav__menu-item" data-section="Portfolio">
              <a href="#" class="nav__menu-link">پورتفولیو</a>
            </li>
            <li class="nav__menu-item" data-section="Packages">
              <a href="#" class="nav__menu-link">پکیج ها</a>
            </li>
            <li class="nav__menu-item" data-section="Contact-us">
              <a href="#" class="nav__menu-link">ارتباط با ما</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>



    <script src=".4.1.js"></script>
    <script src="/iconify-icon/2.3.0/iconify-icon.min.js"></script>
    <script src="./Scripts/swiper-bundle.min.js"></script>
    <script src="/[email protected]/build/player/lottie.min.js"></script>
    <script src="/@h0rn0chse/dark-mode-toggle@2/dist/bundle.min.js"></script>
    <script src="./Scripts/app.js"></script>
  </body>
</html>