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

Рейтинг: 0Ответов: 1Опубликовано: 07.03.2023

У меня на сайте есть 2 темы(светлая/темная), они меняются по нажатию кнопки (через смену стилей. Для светлой light-theme.css, для темной - dark-theme.css). Хочу сделать, чтоб стиль css не менялся при обновлении страницы, т.е. если пользователь уже нажал кнопку и тема изменилась на темную, то при перезагрузке странице или переходе на другую вкладку оставалась также темная тема. Как это можно корректнее сделать? Если можно, хотелось бы полный код, так как ввиду моим скудных познаний в программировании, боюсь, что из примера я мало что пойму.

Вот код JS, который отвечает за смену стилей:

// Выбираем кнопку
const btn = document.querySelector(".btn-toggle");
// Выбираем таблицу стилей
const theme = document.querySelector("#theme-link");
// Отслеживаем щелчок по кнопке
btn.addEventListener("click", function() {
  // Если текущий адрес содержит "light-theme.css"
  if (theme.getAttribute("href") == "css/light-theme.css") {
    // …то переключаемся на "dark-theme.css"
    theme.href = "css/dark-theme.css";
    // В противном случае… 
  } else {
    // …переключаемся на "light-theme.css"
    theme.href = "css/light-theme.css";
  }
});
css javascript html localstorage
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Вот так можно сохранять выбранные стили пользователя

Модифицируем текущий код добавляем сохранение значения в localStarage

  // Выбираем кнопку
  const btn = document.querySelector(".btn-toggle");
  // Выбираем таблицу стилей
  const theme = document.querySelector("#theme-link");
  // Отслеживаем щелчок по кнопке
  btn.addEventListener("click", function() {
    // Если текущий адрес содержит "light-theme.css"
    if (theme.getAttribute("href") == "css/light-theme.css") {
      // …то переключаемся на "dark-theme.css"
      theme.href = "css/dark-theme.css";
      // Сохраняем значение в хранилище
      localStorage.setItem('theme', 'css/dark-theme.css');
      // В противном случае…
    } else {
      // …переключаемся на "light-theme.css"
      theme.href = "css/light-theme.css";
      // Сохраняем значение в хранилище
      localStorage.setItem('theme', 'css/light-theme.css');
    }
  });

Добавляем в код функцию, которая будет загружаться при загрузке страницы

  function setTheme() {
    theme.href = localStorage.getItem('theme') || 'css/light-theme.css'
  }

в HTML, в тег body добавляем

<body onload="setTheme()">

Готово!