0

I am coding in WordPress to make a button to toggle body class from light-mode to dark-mode. i was experimenting with trying to add a cookie so that the preference is remembered for the browser. But i receive a error Cannot set property className of null at setThemeFromCookie.

moreover clicking the button gives another error (index):486 Uncaught TypeError: Cannot read property 'className' of null at togglePageContentLightDark

My url is https://milyin.com you can see the button in blue color located in footer

JS follows

 function togglePageContentLightDark() {
      var body = document.getElementById('body')
      var currentClass = body.className
      var newClass = body.className == 'dark-mode' ? 'light-mode' : 'dark-mode'
      body.className = newClass

  document.cookie = 'theme=' + (newClass == 'light-mode' ? 'light' : 'dark')
  console.log('Cookies are now: ' + document.cookie)
}

function isDarkThemeSelected() {
  return document.cookie.match(/theme=dark/i) != null
}

function setThemeFromCookie() {
  var body = document.getElementById('body')
  body.className = isDarkThemeSelected() ? 'dark-mode' : 'light-mode'
}

(function() {
  setThemeFromCookie()
})();

HTML for button

<button type="button" name="dark_light" onclick="togglePageContentLightDark()" title="Toggle dark/light mode">🌛</button>

i am fairly new to Java script and this code was taken from internet only. Please help me debug this code.

2

Using JQuery Simplifies the whole thing, using JS Cookie

$(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');
         }

     });

});

Add id to button.

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

Also add this script

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
  • tried yours. the cookies work but class is not changing. it still doesn't toggle from light-mode to dark-mode.also note it that i manually added the body class via php, the script doesn't add the class forget about toggling it – Aditya Agarwal Mar 23 at 14:04
  • Check the updated answer. Now at least toggle button should work! – Qaisar Feroz Mar 23 at 15:34
  • BTW why not use jQuery? – Qaisar Feroz Mar 23 at 15:40
  • well i don't have much experience of Jquery, didn't want to mess things up – Aditya Agarwal Mar 24 at 3:53
  • Did copy paste your jQuery code in head, and added the html for button as it is. Didn't work, also added the innitial body class using php 'light-mode' but i am afraid no success, Uncaught TypeError: $.cookie is not a function at HTMLDocument.<anonymous> ((index):126) at i (jquery.js?ver=1.12.4:1) at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:1) at Function.ready (jquery.js?ver=1.12.4:1) at HTMLDocument.K (jquery.js?ver=1.12.4:1) – Aditya Agarwal Mar 24 at 4:28
0

var body = document.getElementById('body') is your problem. The document's body is not an id, it's a tag. Use var body = document.querySelector('body');

  • Actually document.body would be the fastest way to target the body element. – mrben522 Mar 23 at 13:29
  • the toggle doesn't work. it still shows error in console – Aditya Agarwal Mar 23 at 14:11

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.