Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.04.2023, 04:46
Кандидат Javascript-наук
Отправить личное сообщение для WebMachine Посмотреть профиль Найти все сообщения от WebMachine
 
Регистрация: 11.10.2016
Сообщений: 141

Помогите доделать смену темы с сохранением в localStorage
В общем есть: https://jsfiddle.net/Georka/dkqpmbzr/1/

Как сделать так чтобы помимо фона в localStorage ещё и сохранялся текст кнопки. Остальное всё как есть оставить..

Только нужно решение в стиле Vanilla js
Без всяких подключений Нео из матрицы. Only simple code

Последний раз редактировалось WebMachine, 24.04.2023 в 04:48.
Ответить с цитированием
  #2 (permalink)  
Старый 24.04.2023, 05:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

смена темы с сохранением в localStorage
WebMachine,
желательно размещать код здесь или в другой песочнице.
<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            color: #222;
            background-color: #fff;
        }

        body.dark-theme {
            color: #eee;
            background-color: #121212;
        }

        body.dark-theme a {
            color: #809fff;
        }

        .btn-toggle:after {
            content: "Dark Theme"
        }

        body.dark-theme .btn-toggle:after {
            content: "Light Theme"
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const btn = document.querySelector(".btn-toggle");
            let currentTheme = localStorage.getItem("theme");
            if (currentTheme == "dark") {
                document.body.classList.add("dark-theme");
            }
            btn.addEventListener("click", function(event) {
                document.body.classList.toggle("dark-theme");
                currentTheme = currentTheme == "dark" ? "light" : "dark";
                localStorage.setItem("theme", currentTheme);
            });
        })
    </script>
</head>

<body>
    <button class="btn-toggle" type="button"></button>
</body>

</html>
Ответить с цитированием
  #3 (permalink)  
Старый 25.04.2023, 05:31
Кандидат Javascript-наук
Отправить личное сообщение для WebMachine Посмотреть профиль Найти все сообщения от WebMachine
 
Регистрация: 11.10.2016
Сообщений: 141

спасибо Рони)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите доделать слайдер l_mke Элементы интерфейса 5 23.08.2019 13:40
Помогите доделать калькулятор toyboy__37 Элементы интерфейса 3 07.07.2019 17:58
Помогите сделать смену border на javascript verhmax Общие вопросы Javascript 5 02.09.2012 22:41
Помогите доделать калькулятор расчета стоимости. mazaxaka jQuery 2 08.08.2012 16:14
Помогите доделать меню Nikolay63 Элементы интерфейса 11 06.04.2010 15:46