window.matchMedia с кнопкой и localstorage

Question

Имею вот такой код, который включает темную тему на сайте.

    const BtnDarkMode = document.querySelector('#toggle-darkmode');
const currentMode = localStorage.getItem("mode");
let prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");

if (currentMode == "dark") {
    document.body.classList.add("dark-mode");
}
BtnDarkMode.addEventListener("click", function () {
    document.body.classList.toggle("dark-mode");
    let mode = "light";
    if (document.body.classList.contains("dark-mode")) {
        mode = "dark";
        document.body.classList.add("dark-mode");
    }
    localStorage.setItem("mode", mode);
});

Задача стоит в том, чтобы подвязать свойство window.matchMedia (проверяет включена ли темная тема в системе пользователя, пока только засунул в переменную prefersDarkScheme) таким образом, чтобы при загрузке сайта происходил toggle к тегу body с добавлением класса dark-mode, но при этом если пользователь нажатием кнопки меняет тему на светлую, то данные записываются в localstorage и при следующей загрузке сайта берутся оттуда, а не из системы. Мои варианты решения дают либо постоянную загрузку темной темы, с игнором localstorage либо полностью игнорят window.matchMedia. Уровень знаний JS = "null" )

Answer 1

ну просто добавьте проверку на "установлено, ли mode в localStorage"

В Вашем случае currentMode может быть три вариант: null, light, dark; Проверка на mode !== 'light' пропустит если mode = null или dark

const BtnDarkMode = document.querySelector('#toggle-darkmode');
const currentMode = localStorage.getItem("mode");
let prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");

if (currentMode == "dark" && mode !== "light") {
  document.body.classList.add("dark-mode");
}
BtnDarkMode.addEventListener("click", function () {
  document.body.classList.toggle("dark-mode");
  let mode = "light";
  if (document.body.classList.contains("dark-mode")) {
    mode = "dark";
    document.body.classList.add("dark-mode");
  }
  localStorage.setItem("mode", mode);
});

Answer 2

Поковырял сам) сделал проверку на то, что в браузере активна темная тема и при этом локальное хранилище пусто

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && localStorage.getItem('mode') == null )

в этом случае уже загружаем туда значение mode = dark, и добавляем класс к body, а потом уже работаем с кнопкой, записывая в localstorage данные. Теперь если кто-то с темной темой заходит на страницу, весь сайт тоже с темной темой. Если со светлой темой, то и сайт светлый.Кнопкой меняется оформление, и уже потом сайт всегда будет такой, каким его выбрал посетитель, пока не поменяет свой выбор или не очистит хранилище браузера). Весь код здесь:

const BtnDarkMode = document.querySelector('#toggle-darkmode');

function darkModeLoad() {
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && localStorage.getItem('mode') == null ) {
        document.body.classList.add('dark-mode');
        localStorage.setItem("mode", "dark-mode");
    }
    let storageGet = localStorage.getItem("mode") || "";
    if (storageGet) {
        document.body.classList.add(storageGet);
    }
}
darkModeLoad();

BtnDarkMode.addEventListener("click", function () {
    document.body.classList.toggle("dark-mode");
    let mode = localStorage.getItem("mode");
    if (mode && mode === "dark-mode") {
        localStorage.setItem("mode", "");
    } else {
        localStorage.setItem("mode", "dark-mode");
    }
});

БЛОГ НА HUSL

window.matchMedia с кнопкой и localstorage

Ответы (2 шт):