Как сохранить режим темной темы в локальном хранилище?

main
1

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

2

Конечно, давай разберём, как это можно сделать. Вот пошаговое руководство:

  1. Определение текущей темы: Используй JavaScript, чтобы определить, какая тема выбрана:

    const currentTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', currentTheme);

    Здесь, если в localStorage не найдено значение для темы, по умолчанию устанавливается светлая тема.

  2. Переключение темы: Создай функцию, которая будет переключать тему и сохранять выбор пользователя:

    function toggleTheme() {
    let theme = localStorage.getItem('theme') === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
}

    Эта функция меняет текущую тему на противоположную (с тёмной на светлую и наоборот) и сохраняет новую тему в localStorage.

  3. Подключение переключателя: Добавь на сайт кнопку или переключатель для изменения темы, привязав её к функции:

    <button onclick="toggleTheme()">Toggle Theme</button>

  4. Стилизационные изменения: Определи стили для разных тем в CSS:

    :root[data-theme='light'] {
    --background-color: #ffffff;
    --text-color: #000000;
}

:root[data-theme='dark'] {
    --background-color: #000000;
    --text-color: #ffffff;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}

  5. Проверка при загрузке страницы: Когда пользователь заходит на сайт, скрипт автоматически применяет тему, которая была сохранена в localStorage. Это делается в первом шаге, когда ты устанавливаешь атрибут data-theme для элемента documentElement.

Таким образом, выбранный пользователем режим темы будет сохраняться при помощи localStorage, а также применяться при каждом посещении сайта. Это создаст более приятный опыт для пользователя, так как ему не придется каждый раз выбирать желаемую тему. . Я ответил на ваш вопрос?

3

Слушай, я тут пытался замутить тему с темной темой в локальном хранилище, чтобы она сохранялась, когда сайт открываешь. Это ж вообще удобно, никто не хочет каждый раз переключать.

Я взял, значит, код, где сохраняется состояние темы. То есть, когда нажимаю на кнопку переключения, оно должно записывать в локальное хранилище. По идее, потом, когда страница загружается, оно должно проверять, есть ли уже сохранённое значение, и забирать его, чтобы не пришлось заново щелкать.

Но вот незадача! Как только я обновляю страницу, темная тема включается на пару секунд, а потом обратно возвращается на светлую. Я думал, что проблема в самой функции, которая это считывает, но всё вроде нормально. Я даже в консоли проверял, что значение в локальном хранилище записывается, но не читает его обратно.

При этом, когда я делал console.log, чтобы понять, что происходит, всё записывается как надо, а вот при загрузке просто игнорируется. Чёрт его знает, где зарыта собака. Может, дело в том, что я не правильно вызываю функцию при загрузке страницы? Короче, полнейший замес. Либо забыл что-то важное, либо код где-то не так работает.

Надеюсь, ты знаешь, что я мог сделать не так, а то этот вопрос меня уже напрягает!

4

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

Во-первых, убедись, что функция, которая устанавливает тему из локального хранилища, действительно вызывается как можно раньше во время загрузки страницы. Если она вызывается слишком поздно, например, после того, как все элементы страницы уже отрисованы, это может выглядеть как мерцание темы. Ты можешь попробовать её поместить внутри какого-нибудь обработчика загрузки, скажем, DOMContentLoaded, чтобы код выполнялся сразу после загрузки DOM:

document.addEventListener('DOMContentLoaded', () => {
    setThemeFromLocalStorage();
});

Затем, проверь, как ты устанавливаешь тему. Если у тебя есть какая-то анимация или CSS-переходы на смену темы, это тоже может вызвать задержку.

Также стоит убедиться, что логика, которая отвечает за изначальный выбор темы, правильно обрабатывает данные из локального хранилища. Например:

  1. Проверь, корректно ли записывается и считывается значение из localStorage.
  2. Убедись, что если значение не установлено, устанавливается дефолтная тема, и эта логика находится в явном порядке — сначала читаем значение, потом включаем тему.

Вот такой базовый пример:

function setThemeFromLocalStorage() {
    const savedTheme = localStorage.getItem('theme') || 'light'; // light —  дефолтная тема
    document.body.className = savedTheme;
}

function toggleTheme() {
    let currentTheme = document.body.className;
    let newTheme = currentTheme === 'light' ? 'dark' : 'light';
    document.body.className = newTheme;
    localStorage.setItem('theme', newTheme);
}

document.querySelector('#toggleButton').addEventListener('click', toggleTheme);

Если после всех проверок всё также не выйдет, попробуй временно убрать любой код, который может вызвать задержку при загрузке темы, и посмотри, изменится ли поведение — так будет проще сузить проблему.

Надеюсь, эти идеи помогут разобраться в твоем “замесе”. Если у тебя есть какие-то конкретные участки кода, можешь их показать, и мы их вместе разберем! . Я ответил на ваш вопрос?