Top

Customizer

How does switch to dark mode works?
We have added the following code in script.js file to make the functionality work.
<!-- script.js  -->
  $(document).ready(function () {
    document.body.classList.add(localStorage.getItem("body"));
    
      }
    }
  
  
  $(".mode").on("click", function () {
    $(".mode").toggleClass("dark");
    $("body").toggleClass("dark-only");
    var color = $(this).attr("data-attr");
    var darkInBody = document.body.classList.contains('dark-only');
    if(darkInBody){
      localStorage.setItem("body", "dark-only");
      }
    else{
      localStorage.setItem("body", "");
      }
    
  });
This change remain even if you change to different page or reload the page.
Permanent Layouts
Similarly if you want to keep the change to the layout even after the page change than modify the customizer.js file as follows.
Add the following code in document.ready function in customizer.js file 
<!-- customizer.js  -->
  $(document).ready(function () {
  document.body.classList.add(localStorage.getItem("layout"));
  $("html").attr("dir", localStorage.getItem("layout"));
  }
And add the layout value to localstorage in customizer.js file in below given functions
<!-- customizer.js  -->
  $('.main-layout li').on('click', function () {
    $(".main-layout li").removeClass('active');
    $(this).addClass("active");
    var layout = $(this).attr("data-attr");
    $("body").attr("class", layout);
    $("html").attr("dir", layout);
  
    localStorage.setItem("layout",layout);
  });
  
  $('.main-layout .box-layout').on('click', function () {
    $(".main-layout .box-layout").removeClass('active');
    $(this).addClass("active");
    var layout = $(this).attr("data-attr");
    $("body").attr("class", "box-layout");
    $("html").attr("dir", layout);
  
    localStorage.setItem("layout","box-layout");
  });