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

Question

I am basically setting up a dark mode switch to my site and I want the browser to remember user click from dark to light theme. Code somewhat breakup and not clean but anyhow it works in changing dark & light mode style sheets.

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

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

    <div id="switch" class="toggle">      
        <div class="in-toggle tg-left">
           <input type="checkbox"> 
         </div>
    </div>

JavaScript:

jQuery(document).ready(function($){
  
 var toggle_btn = $(".toggle .in-toggle input");
    var i_tg = $(".in-toggle");
    var toggle = $(".toggle");
    
    toggle_btn.on("click", clicked);
    
    function clicked() {
      if (toggle_btn.is(":checked")) {
        i_tg.addClass("tg-right");
    
        toggle.addClass("clicked");

      } else {
        i_tg.removeClass("tg-right");
        toggle.removeClass('clicked');

      }
    }
  
  
  var  switch_mode = 'dark';

document.getElementById('switch').onclick = function(){
  if(switch_mode == 'dark'){
      document.getElementById('3428-css').setAttribute('href','');
     document.getElementById('3432-css').setAttribute('href','//site-url.org.in/wp-content/uploads/custom-css-js/3432.css');
     switch_mode = 'light';
     
       
  } else {
    
 document.getElementById('3428-css').setAttribute('href','//site-name.org.in/wp-content/uploads/custom-css-js/3428.css');
 document.getElementById('3432-css').setAttribute('href','');
     switch_mode = 'dark';

  }
}
});

How can I save the toggle on user interaction until the toggle is switched back? This is all for non logged in user so local storage or cookie sessions can be helpful.

Fiddle Link

Md Sarfaraz Hussain · Accepted Answer · 2021-08-23T12:08:20.280

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;
}

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

1 Answers1