Блог

Я создаю веб-приложение и хотел бы предоставить пользователю возможность переключать тему с оригинальной на тему в темном режиме.

У меня есть два разных файла .css, один для оригинальной темы и один для темного режима, но я не знаю, как реализовать такую кнопку.

На данный момент у меня есть функция:

 function updateStyleSheet(filename) {

        newstylesheet = "Content/"   filename   ".css";
        if ($("#dynamic_css").length == 0) {
            $("head").append("<link>")
            css = $("head").children(":last");
            css.attr({
                id: "dynamic_css",
                rel: "stylesheet",
                type: "text/css",
                href: newstylesheet
            });
        } else {
            $("#dynamic_css").attr("href", newstylesheet);
        }

    }
  

И я называю это использованием:

 <input type="button" onclick="updateStyleSheet('bootstrap-SUPERHER')" value="Dark Mode">
  

Однако, когда я перехожу на другую страницу, тема возвращается к исходной. Как мне сделать это постоянным?

Любая помощь высоко ценится.