Переключение между 2 таблицами стилей (один переключатель) с локальным хранилищем

Question

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

Я знаю, что есть несколько подобных вопросов, но ни один из них не использует переключатель и локальное хранилище с2 таблицы стилей (скорее переменные css или что-то еще, мой css ужасный беспорядок и не может заставить их работать).Я дизайнер пользовательского интерфейса с некоторыми знаниями HTML / CSS, и я едва нахожу время для изучения JS.

<link id="theme" rel="stylesheet" type="text/css" href="default.css" />


<input type="checkbox" id="tog"/>
<label for="tog" class="toggle" onclick="toggle()"></label>   


<script type='text/javascript'>
function toggle() {
  var el = document.getElementById("theme");
  if (el.href.match("default.css")) {
    el.href = "dark.css";    
  }
  else {
    el.href = "default.css";  
  }
}
</script>    

Это прекрасно работает, но мне нужно сохранить переключатель, чтобы он не изменился послеосвежитьсяИ из того, что я прочитал, это сделано с локальным хранилищем, но это вне меня.

Я вижу примеры с несколькими ссылками / кнопками для каждого стиля, но я не могу адаптировать их к переключателю.Я пробовал.Не могли бы вы помочь?

Answer 1

<script>

    function toggle() {
        var el = document.getElementById("theme");
        var theme = (el.href === 'default.css') ? 'dark.css' : 'default.css';
        el.href = theme;
        localStorage.setItem('theme', theme);
    }

    function defaultTheme() {
        var el = document.getElementById('theme');
        var theme = localStorage.getItem('theme');

        if (theme) {
            el.href = theme
        }
    }

    defaultTheme();

</script>

Answer 2

Как это:

function toggle(theme) {
  var styleSheet = document.getElementById("theme");
  if (theme != styleSheet.href) styleSheet.href = theme;
  document.getElementById("tog").checked = styleSheet.href === "dark.css";
}
window.addEventListener("load",function() {
  var theme = localStorage.getItem("theme") || document.getElementById("theme").href;
  toggle(theme);
  document.getElementById("tog").addEventListener("change",function() {
    var theme = this.checked ? "dark.css" : "default.css"
    toggle(theme);  
    localStorage.setItem("theme",theme);
  })
})

<link id="theme" rel="stylesheet" type="text/css" href="default.css" />


<label>Toggle to dark theme <input type="checkbox" id="tog"/></label>