How to store the user input throughout the site and on reload ( switch between dark and light theme )

Solution:

I finally got it working with local storage. Js is changed. Working fiddle

I got this to work from this post . Be sure to add JS after jquery is called as the style or some details won’t work as expected

Html

<link rel='stylesheet' id='3432-css' href='//your-site.org.in/wp-content/uploads/custom-css-js/3432.css?v=3920' data-theme="dark" type="text/css" media='all' />

<link rel='stylesheet' id='3428-css' href='//your-site.org.in/wp-content/uploads/custom-css-js/3428.css?v=2941' data-theme="light" type="text/css" media='all' />

<div id="switch1" class="container1 toggle">
        <div class="toggle-container">
         <input type="checkbox" id="switch" /><label for="switch">Toggle</label>
        </div>
  </div>

JavaScript

let theme = localStorage.getItem('data-theme');
const checkbox = document.getElementById("switch");
const changeThemeToDark = () =>{
document.getElementById('3428-css').setAttribute('href','');
     document.getElementById('3432-css').setAttribute('href','//your-site.org.in/wp-content/uploads/custom-css-js/3432.css');
    document.documentElement.setAttribute("data-theme", "dark")
     document.getElementsByTagName("label")[0].setAttribute("class", "darkbg");
    localStorage.setItem("data-theme", "dark")
}

const changeThemeToLight = () =>{
   document.getElementById('3428-css').setAttribute('href','//your-site.org.in/wp-content/uploads/custom-css-js/3428.css');
 document.getElementById('3432-css').setAttribute('href','');
  document.getElementsByTagName("label")[0].setAttribute("class", "lightbg");
    localStorage.setItem("data-theme", 'light')
}

if(theme === 'dark'){
    changeThemeToDark()
}

checkbox.addEventListener('change', ()=> {
    let theme = localStorage.getItem('data-theme');
    if (theme ==='dark'){
    document.getElementsByTagName("label")[0].setAttribute("class", "darkbg");
        changeThemeToLight()
    }else{
    document.getElementsByTagName("label")[0].setAttribute("class", "lightbg");
        changeThemeToDark()
    }
   
});

Style

    .container1 {
    width: 60px;
    height: 30px;
    position: fixed;
    top: 85%;
    left: 85%;
    transition: 1s ease;
    z-index: 999;
}

div#switch1:before {
    content: 'Switch Theme';
    position: absolute;
    top: -30px;
    width: 110px;
    text-align: center;
    left: -30px;
    font-weight: bold;
    /* box-shadow: 5px 10px 8px #ffd6d6; */
    background: #fff;
    color: #000;
    border-radius: 50px;
    font-size: 13px;
}

input[type=checkbox]{
    height: 0;
    width: 0;
    visibility: hidden;
}

.container1 label {
    cursor: pointer;
    text-indent: -9999px;
    width: 100px;
    height: 40px;
    background: grey;
    display: block;
    border-radius: 100px;
    position: relative;
}

label:after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 90px;
    transition: 0.3s;
}

input:checked + label {
    background: #bada55;
}

input:checked + label::after {
    left: calc(100% - 5px);
    transform: translateX(-100%);
}

label:active:after {
    width: 130px;
}
label.darkbg {
  background: #007cba !important;
}

label.lightbg {
  background: grey !important;
}