Показать сообщение отдельно
  #31 (permalink)  
Старый 11.05.2022, 13:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

vitalso78,
и такой вариант
строка 8 href оставить пустым
строка 9 ставить сразу после link

строка 16 в любое место.

строка 39 убрать class switch-on

<!DOCTYPE html>
<html>

<head>
    <title>css localStorage</title>
    <meta charset="UTF-8" />
    <base href="https://delivery.foodsonic.ru/" />
    <link rel="stylesheet" href="" id="theme-css-file" />
    <script>
    let CssFilePath = localStorage.getItem("CssFilePath")||"https://delivery.foodsonic.ru/light.css";
    const styleElement = document.querySelector("#theme-css-file");
    styleElement.href = CssFilePath;
    </script>


    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const styleElement = document.querySelector("#theme-css-file");
            const button = document.querySelector("#SuperButton");
            let CssFilePath = localStorage.getItem("CssFilePath");
            if (CssFilePath) {
                if (CssFilePath.indexOf("dark.css") !== -1) button.classList.add("switch-on");
                else button.classList.remove("switch-on");
             
            }
            button.addEventListener("click", function() {
                let href = "https://delivery.foodsonic.ru/light.css";
                button.classList.toggle("switch-on");
                if (button.classList.contains("switch-on")) href = "https://delivery.foodsonic.ru/dark.css";
                styleElement.href = href;
                localStorage.setItem("CssFilePath", href);
            })
        });
    </script>
</head>

<body>
    <div>Switch theme:</div>
    <div class="switch-btn" id="SuperButton" name="SuperButton">SuperButton</div>
</body>

</html>

Последний раз редактировалось рони, 11.05.2022 в 13:24.
Ответить с цитированием