@Alexfixer

При смене темы сайта после обновления страницы мелькают старые стили, как исправить?

После смене темы сайта на ночную, когда обновляю страницу, на 1 секунду мелькают старые стили, подскажите как исправить это?

.body-night.active {
	background-color: #171c20; 
}


$(document).ready(function() { 
      if (localStorage.getItem('body-night') == 'active') {
        $('.body-night').addClass('active');
      }
});
// добавление к body класса active
$(".night-user_theme").click(function() {
     $('.body-night').toggleClass('active');
      if (localStorage.getItem('body-night') == 'active') {
        localStorage.removeItem("body-night", "active");
      } else {
        localStorage.setItem("body-night", "active");
      }
});
  • Вопрос задан
  • 172 просмотра
Решения вопроса 1
sniggering_deus
@sniggering_deus Куратор тега CSS
I will live forever in the flame of your eyes.
Вот:

let bodyNight = document.querySelector('.body-night');
let buttonTheme = document.querySelector('.night-user_theme');

if (localStorage.getItem('body-night') == 'active') {
bodyNight.classList.add('active');
}

buttonTheme.onclick = function() {
bodyNight.classList.toggle('active');
if (localStorage.getItem('body-night') == 'active') {
localStorage.removeItem("body-night", "active");
} else {
localStorage.setItem("body-night", "active");
}
};


Решение на чистом js, без jquery.

Песочница:

Ответ написан
Пригласить эксперта
Ответы на вопрос 3
l3ftoverz
@l3ftoverz Куратор тега CSS
Люблю Финский металкор и ищу работу.
Добавь конкретно этот код в head, тогда он будет выполнять до рендеринга.
Ответ написан
OtshelnikFm
@OtshelnikFm
Мои работы: otshelnik-fm.ru
$(document).ready(function()
- это медленно.
Эту проверку убери и внутри что на jquery - добавление класса - сделай на чистом js.
Так ты не будешь ждать когда сам jquery загрузится и скажет "я и док готов"
Ответ написан
@andreysuha
Что то знаю
Почему не сохранят выбранную тему в куки и возводит нужные классы средствами бекенда?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы