/*اسکریپت پایه*/
      <script>
          const switchElement = document.querySelector('.switch')

switchElement.addEventListener('click', function () {
  // Hint: Add 'dark' class to body :))

  document.body.classList.toggle('dark')

  if (document.body.className.includes('dark')) {
    localStorage.setItem('theme', 'dark')
  } else {
    localStorage.setItem('theme', 'light')
  }

  // console.log(document.body.className.includes('dark'));  // Boolean
})


window.onload = function () {
  let localStorageTheme = localStorage.getItem('theme')

  if (localStorageTheme === 'dark') {
    document.body.classList.add('dark')
  }

}
          
      </script>
      

/*اسکریپت مخصوص uiverse*/

<script>
const niasswitchElement = document.querySelector('.theme-switch__checkbox')

niasswitchElement.addEventListener('click', function () {
  // Hint: Add 'dark' class to body :))

  document.body.classList.toggle('dark')

  if (document.body.className.includes('dark')) {
    localStorage.setItem('theme', 'dark')
  } else {
    localStorage.setItem('theme', 'light')
  }

  // console.log(document.body.className.includes('dark'));  // Boolean
})


window.onload = function () {
  let localStorageTheme = localStorage.getItem('theme')
  if (localStorageTheme === 'dark') {
    document.body.classList.add('dark')
    document.getElementById('themeSwitch').checked = true;
  }

}
          
      </script>



****************************html***************
<div class="switch">
        <div class="flicker"></div>
        <div class="moon"></div>
      </div>
**************css********************
/*کد های مربوط به دارک مود*/

.switch {
  width: 80px;
  height: 40px;
  border-radius: 20px;
  background-color: rgb(39, 38, 38);
  position: relative;
}

.flicker {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: 5px;
  left: 5px;
  transition: 0.3s;
  box-shadow: inset 4px 4px 4px rgb(255, 255, 255),
    inset -4px -4px 4px rgb(195 193 198 / 90%);
}
.moon {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  box-shadow: 4px 4px 0 0 rgb(255, 255, 255);
  position: absolute;
  top: 5px;
  left: 45px;
}
.dark .flicker {
  transform: translateX(40px);
}



.dark {
  background-color: rgb(57, 57, 57);
  transition: 0.3s;
}

.dark > * {
  color: rgb(255, 255, 255);
}

.dark a {
  color: rgb(246, 169, 241);
}


.dark h1, .dark span, .dark i, .dark .singlepostnias, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 , .dark .menu .e-n-menu-title-text.e-link.e-focus{
  color: white!important;
}
.dark .elementor-icon-box-title span , .dark .header-menu-nias span{
    color: #009966!important
}
.dark .niasdark .elementor-widget-container{
    background-color: #282828!important;
}
