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

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
296 просмотров

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

Подписаться 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

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

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

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

CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 3 часа назад
- 22 просмотра
1

ответ
HTML

+1 ещё

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

ответ
JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- 22 часа назад
- 125 просмотров
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- 23 часа назад
- 145 просмотров
4

ответа
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- вчера
- 94 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- вчера
- 70 просмотров
1

ответ
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- вчера
- 46 просмотров
0

ответов
JavaScript

Простой
Как при открытии блока закрыть предыдущий блок?
- 1 подписчик
- вчера
- 105 просмотров
0

ответов
JavaScript

Простой
Можно ли использовать Intersection Observer API для не дочерних элементов?
- 1 подписчик
- вчера
- 46 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как предотвратить работу onBlur?
- 1 подписчик
- вчера
- 63 просмотра
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

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

До 220 000 ₽

Верстка Flutter + API

21 нояб. 2024, в 22:21

3000 руб./в час

Разработать Custom Speech-to-text Operator на Apache Flink

21 нояб. 2024, в 21:42

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

Сделать видио поздравления с субтитрами

21 нояб. 2024, в 21:30

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

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.

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

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

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

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