黑暗模式切换记得我切换时

时间:2020-07-05 21:08:07

标签: javascript html css

你好,我有一个关于暗模式切换的问题,当我切换时我想刷新以保存是否选中暗模式 当我切换到黑暗模式时,我想记住刷新页面时我尝试了几种解决方法,但没有用

  • javascript *
let darkMode = localStorage.getItem('darkMode'); 

const darkModeToggle = document.querySelector('[data-switch-dark]');

const enableDarkMode = () => {
  // 1. Add the class to the body
  document.body.classList.add('dark');
  // 2. Update darkMode in localStorage
  localStorage.setItem('darkMode', 'enabled');
}

const disableDarkMode = () => {
  // 1. Remove the class from the body
  document.body.classList.remove('dark');
  // 2. Update darkMode in localStorage 
  localStorage.setItem('darkMode', null);
}
 
// If the user already visited and enabled darkMode
// start things off with it on
if (darkMode === 'enabled') {
  enableDarkMode();
}

// When someone clicks the button
darkModeToggle.addEventListener('click', () => {
  // get their darkMode setting
  darkMode = localStorage.getItem('darkMode'); 
  
  // if it not current enabled, enable it
  if (darkMode !== 'enabled') {
    enableDarkMode();
  // if it has been enabled, turn it off  
  } else {  
    disableDarkMode(); 
  }
});

0 个答案:

没有答案