JavaScript 黑暗模式正在影響我的 AOS？

Question

你好，這里是新手。

所以我在我的投資組合網站（本地）上工作，我添加了 AOS（ https://michalsnik.github.io/aos/ ）和暗模式（ https://dev.to/ananyaneogi/create-a -dark-light-mode-switch-with-css-variables-34l8 ) 在我的腳本中。

在添加黑暗模式之前，動畫卷軸起作用了。

添加深色模式后，我的網站在首次加載或刷新時不再自動設置淡入淡出動畫。

前任。 我的關於我部分在網站加載/刷新時顯示； 當它應該被隱藏並且只有在滾動時才會淡入。

我該如何解決？ （如果沒有解決方案我只能忍受這個小錯誤lmao）

h2 標簽上的淡入淡出示例：

<div data-aos="fade-right" data-aos-duration="1000" data-aos-easing="ease-in-out"
     data-aos-mirror="true" data-aos-once="false" class="aos-init aos-animate">
     <h2>About Me</h2>
</div>

我的 JavaScript 文件：

 document.addEventListener("DOMContentLoaded", function() { setTimeout(function() { AOS.refresh(); }, 500); }); // Dark Mode Switcher // Source: https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8 var toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]'); const currentTheme = localStorage.getItem('theme'); if (currentTheme) { document.documentElement.setAttribute('data-theme', currentTheme); if (currentTheme === 'dark') { toggleSwitch.checked = true; } } function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute('data-theme', 'dark'); localStorage.setItem('theme', 'dark'); } else { document.documentElement.setAttribute('data-theme', 'light'); localStorage.setItem('theme', 'light'); } } window.addEventListener('load', AOS.refresh) toggleSwitch.addEventListener('change', switchTheme, false);

Answer 1

這是 AOS 的一個常見問題，當您第一次加載網站時，它可能會在更改 css 后發生，在您的情況下，您會觸發黑暗模式。

使用window.location.reload()更改為暗模式后，嘗試強制重新加載頁面

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark');
        window.location.reload()

    }
    else {
        document.documentElement.setAttribute('data-theme', 'light');
        localStorage.setItem('theme', 'light');
        window.location.reload()
    }
}

Answer 2

如果您使用任何一種開關，請嘗試一下，

             <DarkModeSwitch
              className={darkMode ? 'dark__icon' : 'light__icon'}
              checked={darkMode}
              onClick={() => toggleTheme() + window.location.reload()}
              />