Как сохранить темную тему при обновлении страницы?

Question

Thomek @Thomek

Как сохранить темную тему при обновлении страницы?

Как сохранить нажатую кнопку тёмной темы при обновлении страницы?

Вот код:

<label><input onchange="changeTheme(this.checked)" type="checkbox" /> Включить темную тему </label> <script>
  function changeTheme(isChecked) {
    if (isChecked) {
      document.body.setAttribute('dark', '');
    } else {
      document.body.removeAttribute('dark');
    }
  }
</script>
<style type="text/css">:root {
  --var-bgcolor: #fff;
  --var-fontcolor: #000;
}

[dark] {
  --var-bgcolor: #333;
  --var-fontcolor: #eee;
}

body {
  background-color: var(--var-bgcolor);
  color: var(--var-fontcolor);
}
</style>

Вопрос задан 26 нояб. 2023
195 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Пригласить эксперта

Ответы на вопрос 1

15 комментариев

Thomek @Thomek Автор вопроса

А не могли бы вы написать полный код, а то с атрибутами что-то не ясно мне..

Написано 26 нояб. 2023

Александр @Seasle Куратор тега CSS

Thomek,

function changeTheme(isChecked) {
  const theme = isChecked ? 'dark' : 'light';
  document.documentElement.dataset.theme = theme;
  localStorage.setItem('theme', theme);
}

:root {}

[data-theme="dark"] {}

Написано 26 нояб. 2023

Thomek @Thomek Автор вопроса

Александр, Что-то то не работает, наверно я что-то не так делаю..

Написано 26 нояб. 2023
Thomek @Thomek Автор вопроса
А не подскажите куда мне добавить этот код, в отдельный раздел

:root {} [data-theme="dark"] {}
Написано 26 нояб. 2023
Thomek @Thomek Автор вопроса
Александр, И подскажите куда добавить этот код, тоже отдельно от основного скрипта или в него?!

function changeTheme(isChecked) { const theme = isChecked ? 'dark' : 'light'; document.documentElement.dataset.theme = theme; localStorage.setItem('theme', theme); }
Написано 26 нояб. 2023
Александр @Seasle Куратор тега CSS

Thomek, код с function в скрипт в body, код с :root в стили.

Написано 27 нояб. 2023
Thomek @Thomek Автор вопроса

Александр, Две function в один скрипт?!

Написано 27 нояб. 2023
Александр @Seasle Куратор тега CSS

Thomek, у Вас уже есть эта функция, просто замените её.

Написано 27 нояб. 2023

Thomek @Thomek Автор вопроса

Александр, Так ?!

function changeTheme(isChecked) {
  const theme = isChecked ? 'dark' : 'light';
  document.documentElement.dataset.theme = theme;
  localStorage.setItem('theme', theme);
}
  {
    if (isChecked) {
      document.body.setAttribute('dark', '');
    } else {
      document.body.removeAttribute('dark');
    }
  }

Написано 27 нояб. 2023

Александр @Seasle Куратор тега CSS

Thomek,

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Пример</title>
  <style>
    :root {
      --var-bgcolor: #fff;
      --var-fontcolor: #000;
    }

    [data-theme="dark"] {
      --var-bgcolor: #333;
      --var-fontcolor: #eee;
    }

    body {
      background-color: var(--var-bgcolor);
      color: var(--var-fontcolor);
    }
  </style>
  <script>
    const theme = localStorage.getItem('theme');
    if (theme === 'dark') {
      document.documentElement.dataset.theme = 'dark';
    }
  </script>
</head>
<body>
  <label>
    <input onchange="changeTheme(this.checked)" type="checkbox" />
    Включить темную тему
  </label>
  <script>
    function changeTheme(isChecked) {
      const theme = isChecked ? 'dark' : 'light';
      document.documentElement.dataset.theme = theme;
      localStorage.setItem('theme', theme);
    }
  </script>
</body>
</html>

Если такие вопросы, может стоит подучить основы?

Написано 27 нояб. 2023

Thomek @Thomek Автор вопроса

Александр, Почему-то все ровно после обновления страницы, тёмная тема выключается.

Написано 27 нояб. 2023
Александр @Seasle Куратор тега CSS

Thomek, оформите тогда код в песочницу: codepen/codesandbox.

Написано 27 нояб. 2023
Kentavr16 @Kentavr16

Thomek, пример который тебе предоставил Александр абсолютно рабочий. Просто опечатка if (mode === 'dark') заменить на if (theme === 'dark') snippet

Для наглядности добавил отмеченность чекбокса если тема установленна в темную. В остальном ctrl+c,ctrl+v

Написано 27 нояб. 2023
Александр @Seasle Куратор тега CSS

Kentavr16, о как, даже не заметил её.

Написано 27 нояб. 2023
Kentavr16 @Kentavr16

Александр, так это механическая опечатка, которую подсветит любой редактор, и исправляется за 5 секунд, а код ваш абсолютно рабочий. Было бы у топикстартера желание разбираться.

Написано 27 нояб. 2023

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

JavaScript

Средний
Как определить последующие теги с помощью js?
- 1 подписчик
- 2 часа назад
- 28 просмотров
0

ответов
JavaScript

+1 ещё

Простой
События click и touchstart странное поведение на мобильном, как решить?
- 1 подписчик
- 17 часов назад
- 28 просмотров
0

ответов
JavaScript

Простой
Стоит ли использовать lodash сейчас?
- 1 подписчик
- 17 часов назад
- 124 просмотра
1

ответ
JavaScript

Простой
Как сделать проверку на корректную вложенность в скобки ((([])){})?
- 2 подписчика
- 18 часов назад
- 182 просмотра
1

ответ
JavaScript

Простой
Как на javascript преобразовать секунды в часы минуты сенуды?
- 1 подписчик
- 19 часов назад
- 67 просмотров
0

ответов
HTML

+3 ещё

Простой
Возникла поломка файлов для установки пакетов в редакторе Atom, есть ли решение данной проблемы?
- 1 подписчик
- 19 часов назад
- 52 просмотра
1

ответ
JavaScript

Простой
Как решить ошибку Uncaught TypeError: Cannot read properties of null (reading 'insertAdjacentHTML')?
- 1 подписчик
- 21 час назад
- 43 просмотра
2

ответа
CSS

Средний
Как загруглить края полосы прокрутки?
- 1 подписчик
- 22 часа назад
- 39 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Вся секция заежает за header?
- 1 подписчик
- вчера
- 95 просмотров
1

ответ
CSS

Простой
Как в данном коде формируется высота блока?
- 1 подписчик
- вчера
- 51 просмотр
1

ответ
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Middle JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

Разработка мобильного приложение на React Native

28 апр. 2024, в 12:23

400000 руб./за проект

Создание кода страницы "Дерево предложений пользователей"

28 апр. 2024, в 11:58

1000 руб./за проект

Разработка Торгового помощника для терминала Тинькофф

28 апр. 2024, в 11:46

16000 руб./за проект

Answer 1 · 2023-11-26 08:32:39

1. Добавляйте атрибут на document.documentElement.
2. Добавляйте более осмысленный атрибут, например: data-theme="dark"
3. После добавления атрибута сохраняйте его в localStorage:

localStorage.setItem('theme', isChecked ? 'dark' : 'light');

4. В разделе head добавляйте скрипт, который применит атрибут:

const theme = localStorage.getItem('theme');
if (mode === 'dark') {
  document.documentElement.dataset.theme = 'dark';
}

Ещё можете почитать про prefers-color-scheme.

Как сохранить темную тему при обновлении страницы?

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

Минуточку внимания

Войдите на сайт