Не позволять темному режиму мерцать JS - PullRequest
Новая
       4

Не позволять темному режиму мерцать JS

0 голосов
/ 25 мая 2020

У меня есть сайт с переключателем lightmode / darkmode. Он использует локальное хранилище для запоминания выбора пользователя, поэтому в следующий раз, когда он вернется, будет загружена его предпочтительная тема.

Изменение стиля происходит с помощью css переменных.

Вот JS

let darkMode = localStorage.getItem('darkMode'); 
const darkModeToggle = document.getElementById('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(); 
  }
});

Проблема: Когда вы go из одна страница на другую, страница сначала мигает светлой темой, а затем становится темной. Как мне предотвратить загрузку светового режима css первым, если пользователь выбрал темный режим?

* ПРИМЕЧАНИЕ: я знаю, что здесь есть аналогичный вопрос, ответ на который ТАК, ОДНАКО решение не сработало для меня.

...