黑暗模式功能

Question

我创建了一个暗模式功能，允许我使用本地存储来“保存”用户通过单击图标选择的最后选择的首选项，即使他们转到站点内的不同页面、刷新、关闭等.我想不通的是如何添加 if 语句，以便在启用“暗模式”时图标也将其“src”放入不同的 png 文件中，然后在禁用时切换回另一个图标.如果有人能帮我解决这个问题，我将不胜感激。

let darkMode = localStorage.getItem('darkMode'); 

const darkModeToggle = document.querySelector('#dark-mode-toggle');

const enableDarkMode = () => {
  document.body.classList.add('darkmode');
  localStorage.setItem('darkMode', 'enabled');
}

const disableDarkMode = () => {
  document.body.classList.remove('darkmode');
  localStorage.setItem('darkMode', null);
}

if (darkMode === 'enabled') {
  enableDarkMode();
}


darkModeToggle.addEventListener('click', () => {
  darkMode = localStorage.getItem('darkMode');
  
  if (darkMode !== 'enabled') {
    enableDarkMode();

  } else {  
    disableDarkMode(); 
  }
});

const scrollBtn = document.getElementById("scroll_up")

    scrollBtn.addEventListener("click", () => {
        document.documentElement.scrollTop= 0;
    });

Answer 1

只需修改 src 属性，如下所示：

const enableDarkMode = () => {
  document.body.classList.add('darkmode');
  localStorage.setItem('darkMode', 'enabled');
  darkModeToggle.src = "./images/darkToggle.svg"; // replace the path according to YOUR directory structure
}

const disableDarkMode = () => {
  document.body.classList.remove('darkmode');
  localStorage.setItem('darkMode', null);
  darkModeToggle.src = "./images/lightToggle.svg"; // replace the path according to YOUR directory structure
}

黑暗模式功能

Dark Mode Function

javascript

darkmode