-1

I want to create a system, where upon click of a button, a body class is added and the value is stored in local storage.

The value is retrieved from the local storage, and is put again in the body class. This means that upon click of button the body class would be remembered and would be applied across the domain.

Currently i am able to do so using cookie, but first of all i want it is cookie and i want local storage, moreover with current system i have to add body class using php.

Please help me out to implement with code with jQuery.

$(document).ready(function(){

    // Check cookie and set theme
    if(Cookies.get('theme')) {

        $('body').removeClass('light-mode dark-mode').addClass( Cookies.get('theme') );

    };


    //Switch theme and create the cookie...

    $("#theme-toggler").click(function(){

         if ($('body').hasClass( 'light-mode')){
            $('body').removeClass('light-mode').addClass('dark-mode');
            Cookies.set('theme', 'dark-mode');

         }else  {
            $('body').removeClass('dark-mode').addClass('light-mode');
            Cookies.set('theme', 'light-mode');
         }
       });
     });

And

<button id="theme-toggler" type="button" name="dark_light"  title="Toggle dark/light mode">🌛</button>



<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
0

You can try this.

$(document).ready(function(){

    // Check local storage and set theme
    if(localStorage.theme) {

        $('body').addClass( localStorage.theme );

    } 
    else{

        $('body').addClass('light-mode'); // set default theme. No need to set via php now

    }



    //Switch theme and store in local storage ...

    $("#theme-toggler").click(function(){

         if ($('body').hasClass( 'light-mode')){

            $('body').removeClass('light-mode').addClass('dark-mode');
            localStorage.theme = 'dark-mode';


         }
         else  {

            $('body').removeClass('dark-mode').addClass('light-mode');
            localStorage.theme = 'light-mode';

         }
       });
     });

Update
Now there is no need to keep this line

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

This may also help.

Here are working html files using both cookies and local storage.

  • Thanks man, i posted separate question so that i don't trouble u again and again, but your help has been really amazing. I am sry for trouble, and thanks for support – Aditya Agarwal Apr 4 at 15:52
  • @AdityaAgarwal I'm a learner and learning is not trouble at all. Stay blessed! – Qaisar Feroz Apr 4 at 16:02
  • I am blessed having a chance to talk to you. Will test the code and let you know soon. Thanks brother. – Aditya Agarwal Apr 4 at 16:36
  • Hey i am sorry to talk after so many days, and it seems awkward too. But i have a trouble. This code required jquery 3.x.x wordpress defaults to jQuery 1.2.2, is there any way to make it work with jquery 1.2, because adding a extra library adds over a second in overall page load time. It is awkward to ask. And i am sorry to bother you. But please see if you can help me around. – Aditya Agarwal May 15 at 10:03
  • @AdityaAgarwal I checked it and it works with jquery 1.2.2 – Qaisar Feroz May 15 at 16:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.