<script>
    var swapStyleSheet = function (sheet) {
        document.getElementById('pagestyle').setAttribute('href', sheet);
        storebackground(sheet);
    }

    var storebackground = function (swapstylesheet) {
        localStorage.setItem("sheetKey", swapstylesheet); //you need to give a key and value
    }

    var loadbackground = function () {
      let sheetKey = localStorage.getItem('sheetKey');
      if (!sheetKey) {
           sheetKey = 'https://bootswatch.com/5/sketchy/bootstrap.min.css'
      }
      document.getElementById('pagestyle').setAttribute('href', localStorage.getItem('sheetKey'));
}


</script>

Bu şekilde düzenledim ancak sayfayı yenileyince eski haline dönmekte. Css dosyaları site içinde barınmıyor aslında istediğim şey;
Default temamız; https://bootswatch.com/5/sketchy/bootstrap.min.css
https://bootswatch.com/5/flatly/bootstrap.min.css
https://bootswatch.com/5/journal/bootstrap.min.css

bu şekilde cssleri localstroage olacak şekilde değiştirmek. Mantıken tüm tema 1 css dosyasının yolu değişmesiyle değişmil oluyor.