Как сделать сохранение выбора темы тёмная или светлая на любой странице?

Question

[Selfex]

Такой вопрос возник, сделал по видео на своем сайте темную и светлую тему и так что бы по кнопке переключались но переходе на другую страницу сайта тема становиться как на главной по умолчанию и каждый раз нужно тыкать на кнопку переключения

let switchMode = document.getElementById("switchMode");

switchMode.onclick = function () {
    let theme = document.getElementById("theme");

    if (theme.getAttribute ("href") == "light-mode.css") {
        theme.href = "dark-mode.css";
    } else {
        theme.href = "light-mode.css";
    }
}

в HTML стоит такой линк

<link rel="stylesheet" href="dark-mode.css" id="theme">

Comments

[Alex_mos]

Значение нужно где то хранить, поэтому при переходе на другую страну все сбрасывается, могу предположить можно сохранять значение в localStorage

[Ankhena]

Темную и светлую темы заметно проще делать с помощью кастомных свойств CSS.

В js менять только класс у body.
И сохранять какая тема в localStorage.

Answer 1

[Владислава]

<script type="text/javascript">
        var setTheme = localStorage.getItem('theme')
        console.log('theme:', setTheme)
        if(setTheme==null){
            swapStyle('{% static 'base/css/main.css' %}')
        }else{
            swapStyle(setTheme)
        }
function swapStyle(sheet){
            document.getElementById('mystylesheet').href = sheet
            localStorage.setItem('theme', sheet)
        }
</script>