JS主题动画

document.addEventListener("DOMContentLoaded", () => {
  init();
});

var timeInMs = 2000;

function init() {
  if (localStorage.getItem('theme')) {
    document.documentElement.classList.add("dark-theme");
  } 
  else {
    document.documentElement.classList.remove("dark-theme");
  }
}

const toggleBtn = document.querySelector("#toggle-theme");
toggleBtn.addEventListener("click", function() {
  if (document.documentElement.classList.contains("dark-theme")) {
    document.documentElement.classList.remove("dark-theme");
    localStorage.removeItem('theme');
  } else {
    document.documentElement.classList.add("dark-theme");
    localStorage.setItem('theme', 1);
  }
});

  #toggle-theme {
    display: block;
    position: fixed;
    padding: 1rem;
    margin-left: 2rem;
    margin-top: 1%;
    border-radius: 0.5rem;
  }
  
  :root {
    --header-bg-color: #131313;
    --section-bg-color: #131313;
    --text-color: #ffffff;
    --panel-bg-color: #646464;
    --scroll-shadow-color: rgba(255, 255, 255, 0.404);
    
    transition: all 2s ease; /* Применяем общий переход ко всем свойствам */
  }
  
  .dark-theme {
    --header-bg-color: #535353;
    --section-bg-color: #535353;
    --text-color: #000000;
    --panel-bg-color: #fafafa;
    --scroll-shadow-color: rgba(0, 0, 0, 0.404);
  }
  
  input[type=button] {
    color: var(--text-color);
    background: var(--panel-bg-color);
  }
  
  .button {
    font-size: 1rem;
    font-weight: 400;
    font-family: 'Ubuntu';
    min-width: 5%;
    border: none;
    outline: none;
    background: #ffffff;
    cursor: pointer;
    position: relative;
    z-index: 1;
    border-radius: 10px;
    text-transform: capitalize;
  }

<div>
        <input class="button" type="button" value="Theme" id="toggle-theme" />
        
</div>