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

смена темы с сохранением в 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>
Ответить с цитированием