0

Сайт dle. Имеется переключение со светлой на темную тему путем нажатия кнопки, к которой привязан js код.

$('#site-dark').on('click', function(e) {
$("body").toggleClass("site-dark");
});

Как сделать так, чтобы темная тема сохранялась при обновлении сайта или при переходе на другу страницу?

4
  • 1
    Почитайте про cookie.
    – Quazimorda
    1 окт 2021 в 8:03
  • 1
    видимо, на основе прочитанных данных из куки выполнять код в js ) 1 окт 2021 в 8:24
  • Есть готовое решение Или вот еще одно
    – Greg--
    1 окт 2021 в 10:36
  • Передайте в локальное хранилище данные и усе. Куки тоже можно но легче локал
    – pyduti
    1 окт 2021 в 14:34

1 ответ 1

0
const possibleClasses = ['light', 'dark'];
const classFromStorage = localStorage.getItem('savedClass');

if (classFromStorage) {
  if (possibleClasses.includes(classFromStorage)) {
    $('body').addClass(classFromStorage);
  } else {
    localStorage.removeItem('savedClass');
  }
}

$('#elemId').on('click', () => {
  const bodyClasses = $('body').attr('class').split(' ');
  const isLight = bodyClasses.find(possibleClasses[0]);
  const isDark = bodyClasses.find(possibleClasses[1]);
  let classToSave = '';
  if (isLight) {
    $('body').removeClass(possibleClasses[0]);
    classToSave = possibleClasses[1];
  } else if (isDark) {
    $('body').removeClass(possibleClasses[1]);
    classToSave = possibleClasses[0];
  } else {
    classToSave = possibleClasses[0]; // or if 'dark' possibleClasses[1]
  }
  $('body').addClass(classToSave);
  localStorage.setItem('savedClass', classToSave);
});

можно спростить если добавить переменную

const possibleClasses = ['light', 'dark'];
let currentMode = '';
const classFromStorage = localStorage.getItem('savedClass');

if (classFromStorage) {
  if (possibleClasses.includes(classFromStorage)) {
    currentMode = classFromStorage;
  } else {
    localStorage.removeItem('savedClass');
  }
}
$('body').addClass(currentMode);

$('#elemId').on('click', () => {
  if (currentMode === possibleClasses[0]) {
    $('body').removeClass(possibleClasses[0]);
    currentMode = possibleClasses[1];
  } else if (currentMode === possibleClasses[1]) {
    $('body').removeClass(possibleClasses[1]);
    currentMode = possibleClasses[0];
  } else {
    currentMode = possibleClasses[0]; // or if 'dark' possibleClasses[1]
  }
  localStorage.setItem('savedClass', currentMode);
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.