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

CSS JavaScript

1 ответ

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

Вот код:

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

<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>

Дополнительно:

Ответы:

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

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

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

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

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

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

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

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

Thomek,

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

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

:root {}  [data-theme="dark"] {}

:root {} [data-theme="dark"] {}

Александр, Что-то то не работает, наверно я что-то не так делаю..
А не подскажите куда мне добавить этот код, в отдельный раздел
:root {} [data-theme="dark"] {}
:root {} [data-theme="dark"] {}
Александр, И подскажите куда добавить этот код, тоже отдельно от основного скрипта или в него?!
function changeTheme(isChecked) { const theme = isChecked ? 'dark' : 'light'; document.documentElement.dataset.theme = theme; localStorage.setItem('theme', theme); }
function changeTheme(isChecked) { const theme = isChecked ? 'dark' : 'light'; document.documentElement.dataset.theme = theme; localStorage.setItem('theme', theme); }
Thomek, код с function в скрипт в body, код с :root в стили.
Александр, Две function в один скрипт?!
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');     }   }

Thomek,

&lt;!DOCTYPE html&gt; &lt;html lang="ru"&gt; &lt;head&gt;   &lt;meta charset="UTF-8"&gt;   &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;   &lt;title&gt;Пример&lt;/title&gt;   &lt;style&gt;     :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);     }   &lt;/style&gt;   &lt;script&gt;     const theme = localStorage.getItem('theme');     if (theme === 'dark') {       document.documentElement.dataset.theme = 'dark';     }   &lt;/script&gt; &lt;/head&gt; &lt;body&gt;   &lt;label&gt;     &lt;input onchange="changeTheme(this.checked)" type="checkbox" /&gt;     Включить темную тему   &lt;/label&gt;   &lt;script&gt;     function changeTheme(isChecked) {       const theme = isChecked ? 'dark' : 'light';       document.documentElement.dataset.theme = theme;       localStorage.setItem('theme', theme);     }   &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;

<!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, оформите тогда код в песочницу: codepen/codesandbox.
Thomek, пример который тебе предоставил Александр абсолютно рабочий. Просто опечатка if (mode === 'dark') заменить на if (theme === 'dark') snippet
Для наглядности добавил отмеченность чекбокса если тема установленна в темную. В остальном ctrl+c,ctrl+v
Kentavr16, о как, даже не заметил её.
Александр, так это механическая опечатка, которую подсветит любой редактор, и исправляется за 5 секунд, а код ваш абсолютно рабочий. Было бы у топикстартера желание разбираться.

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Игорь Волков Ответ

Для сохранения темной темы при обновлении страницы можно воспользоваться функциональностью localStorage в JavaScript. Вам нужно будет сохранить выбранный пользователем режим темы (светлую или темную) в localStorage и при загрузке страницы проверить это значение, чтобы установить соответствующую тему.

Вот пример кода на JavaScript, который позволит сохранить выбранную тему и применить её при загрузке страницы:

// Проверяем, сохранена ли тема в localStorage
if (localStorage.getItem('theme') === 'dark') {
    // Если сохранена темная тема, применяем её к странице
    document.body.classList.add('dark-theme');
}
 
// Обработчик события для изменения темы
function toggleTheme() {
    // Переключаем класс dark-theme у body
    document.body.classList.toggle('dark-theme');
    // Сохраняем выбранную тему в localStorage
    if (document.body.classList.contains('dark-theme')) {
        localStorage.setItem('theme', 'dark');
    } else {
        localStorage.setItem('theme', 'light');
    }
}
 
// Пример использования кнопки для переключения темы
document.getElementById('theme-toggle').addEventListener('click', toggleTheme);

// Проверяем, сохранена ли тема в localStorage if (localStorage.getItem('theme') === 'dark') { // Если сохранена темная тема, применяем её к странице document.body.classList.add('dark-theme'); } // Обработчик события для изменения темы function toggleTheme() { // Переключаем класс dark-theme у body document.body.classList.toggle('dark-theme'); // Сохраняем выбранную тему в localStorage if (document.body.classList.contains('dark-theme')) { localStorage.setItem('theme', 'dark'); } else { localStorage.setItem('theme', 'light'); } } // Пример использования кнопки для переключения темы document.getElementById('theme-toggle').addEventListener('click', toggleTheme);

С помощью этого кода вы можете добавить класс 'dark-theme' к body вашего документа, если пользователь выбрал темную тему. При обновлении страницы эта информация будет сохранена в localStorage, и тема будет применена автоматически при загрузке страницы.

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

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 1 ответ

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

Дополнительно:

Ответы:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно