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() {

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 Answers 2


Using JQuery Simplifies the whole thing, using JS Cookie


    // 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...


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

         }else  {
            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
    – user160406
    Mar 23, 2019 at 14:04
  • Check the updated answer. Now at least toggle button should work! Mar 23, 2019 at 15:34
  • BTW why not use jQuery? Mar 23, 2019 at 15:40
  • well i don't have much experience of Jquery, didn't want to mess things up
    – user160406
    Mar 24, 2019 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)
    – user160406
    Mar 24, 2019 at 4:28

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, 2019 at 13:29
  • the toggle doesn't work. it still shows error in console
    – user160406
    Mar 23, 2019 at 14:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.