Javascript-форум - Замена стилей

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Замена стилей (https://javascript.ru/forum/dom-window/83998-zamena-stilejj.html)

смена темы оформления страницы с запоминанием выбора

vitalso78,

<!DOCTYPE html>
<html>
<head>
    <title>css localStorage</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="dark.css" id="theme-css-file" />
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const styleElement = document.querySelector("#theme-css-file");
            const buttons = document.querySelectorAll("[data-set-theme-file]");
            let CssFilePath = localStorage.getItem("CssFilePath");
            if (CssFilePath) styleElement.href = CssFilePath;
            buttons.forEach(function(button) {
                let href = button.dataset.setThemeFile;
                button.addEventListener("click", function() {
                    styleElement.href = href;
                    localStorage.setItem("CssFilePath", href);
                })
            })
        });
    </script>
</head>
<body>
    <div>Switch theme:</div>
    <button type="button" data-set-theme-file="light.css">Light</button>
    <button type="button" data-set-theme-file="dark.css">Dark</button>
</body>
</html>

Вот в этот код как воткнуть сохранение ?

window.onload = function() {
    document.getElementById('SuperButton').onclick = function()
    {
        if(document.body.className != 'new_class')
        {
            document.body.className = 'new_class';
        }
        else
        {
            document.body.className = '';
        }
    }
}

Цитата:

Сообщение от vitalso78

Вот в этот код как воткнуть сохранение ?

зачем? грузите ваши css, как показано выше #11, и не мучайтесь с body.

заменв стилей

Цитата:

Сообщение от рони (Сообщение 545281)

зачем? грузите ваши css, как показано выше #11, и не мучайтесь с body.

У меняя не работает ваша конструкция, не полностью подгружает стили. Можно сказать, что вообще не подгружает. Если не трудно, помогите мне в мой код воткнуть сохранение.

Вот я поставил ваше https://delivery.foodsonic.ru/ Вообще работает не поймёш как

Цитата:

Сообщение от vitalso78

Вообще работает не поймёш как

прекрасно работает, что не так?

счас перекинем с кнопок, на ваш div

Фиг знает, у меня не пашет. Один раз переключаеш, потом всё, триндец, не работают кнопки

vitalso78,
верните id!!! id="SuperButton" и замрите)))

vitalso78,

<!DOCTYPE html>
<html>
<head>
    <title>css localStorage</title>
    <meta charset="UTF-8" />
    <base href="https://delivery.foodsonic.ru/" />
    <link rel="stylesheet" href="https://delivery.foodsonic.ru/dark.css" id="theme-css-file" />
    <script>
        document.addEventListener("DOMContentLoaded", function() {

            const styleElement = document.querySelector("#theme-css-file");
            const button = document.querySelector("#SuperButton");
            let CssFilePath = localStorage.getItem("CssFilePath");
            if (CssFilePath) styleElement.href = CssFilePath;
                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 switch-on" id="SuperButton" name="SuperButton">click me SuperButton</div>

</body>
</html>