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

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>

Вопрос задан более года назад
299 просмотров

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

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

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

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

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

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

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

Написано более года назад

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

Thomek,

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

:root {}

[data-theme="dark"] {}

Написано более года назад

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

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

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

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

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

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

Написано более года назад
Thomek @Thomek Автор вопроса

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

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

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

Написано более года назад

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');
    }
  }

Написано более года назад

Александр @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>

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

Написано более года назад

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

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

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

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

Написано более года назад
Kentavr16 @Kentavr16

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

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

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

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

Написано более года назад
Kentavr16 @Kentavr16

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

Написано более года назад

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

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

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

HTML

+1 ещё

Простой
Как сделать блок такой же формы?
- 1 подписчик
- 3 минуты назад
- 16 просмотров
0

ответов
JavaScript

Средний
Postman. Как увеличить время жизни токена?
- 1 подписчик
- 26 минут назад
- 27 просмотров
0

ответов
HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 8 часов назад
- 65 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 19 часов назад
- 96 просмотров
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- вчера
- 76 просмотров
0

ответов
JavaScript

+4 ещё

Сложный
Почему в WebSockets History в Burp Suite отображаются кракозябры?
- 1 подписчик
- вчера
- 88 просмотров
2

ответа
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- вчера
- 65 просмотров
1

ответ
JavaScript

Простой
Как выводить JS код?
- 2 подписчика
- вчера
- 1427 просмотров
1

ответ
JavaScript

Простой
Как заставить срабатывать trigger change в Select2?
- 1 подписчик
- 21 дек.
- 57 просмотров
0

ответов
JavaScript

Простой
Почему появляется ошибка Uncaught Reference?
- 1 подписчик
- 20 дек.
- 85 просмотров
2

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Разработать бота для отслеживания неудачных тон транзакций

23 дек. 2024, в 09:55

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

Верстка сайта в Tilda

23 дек. 2024, в 09:41

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

UI мобильной игры

23 дек. 2024, в 09:39

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

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.

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

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

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

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