主页 / user-615630

faska's questions

Martin Hope
faska
Asked: 2024-12-18 09:27:23 +0000 UTC
  • 5

我不明白如何使颜色平滑而不是突然变化。

以下是用于在单击按钮时更改主题（多个元素的颜色）的 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>

javascript