Search code examples
javascripthtmlcsswordpressdarkmode

Adding Custom Light/Dark Mode Toggle Buttons for Wordpress: Why does the Code work just fine in Codepen but not in WP; i.e. Clicking is not working?

Briefly: I want to add these buttons to my Wordpress website for a user to toggle either Light or Dark-Mode. I have written the code separately as a Codepen item which you can find here; though it works fine there, I can't seem to be able to properly integrate this code into my website.

Just so you know, this is only my second real experience with implementing HTML, CSS, and JS together, and my first with managing code in Wordpress; apologies in advance if I've been overlooking something obvious :-)

Buttons as they look on the website but clicking either does nothing

Where the Buttons are added in "body"

Format using the WP Site Editor

HTML

<!-- 
All that I changed with these two, here, was add id="". The rest is all Wordpress...

The First Button within the Header, using the Wordpress Site Editor, "Edit as HTML" -->

<div class="wp-block-button has-custom-font-size has-small-font-size" id="dark-mode-off"><a class="wp-block-button__link wp-element-button" style="border-radius:100px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">      </a></div>

<!-- The Second Button -->

<div class="wp-block-button has-custom-font-size has-small-font-size" id="dark-mode-on"><a class="wp-block-button__link wp-element-button" style="border-radius:100px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">      </a></div>

CSS


.wp-block-button {
    width: 8px;
    height: 8px;
    border: 1px solid white;
    border-radius: 50px;
    background-color: black;
    position: relative;
}

#dark-mode-on {
  background-color: black;
  border-color: black;
  transition: 0.2s ease-out;
}

#dark-mode-off {
  background-color: white;
  border-color: black;
  transition: 0.2s ease-out;
}

JS

const darkModeOnButton = document.getElementById('dark-mode-on');
const darkModeOffButton = document.getElementById('dark-mode-off');
const body = document.querySelector('body');

darkModeOnButton.addEventListener('click', () => {
  darkModeOnButton.style.backgroundColor = 'black';
  darkModeOnButton.style.borderColor = 'white';
  darkModeOffButton.style.backgroundColor = 'white';
  darkModeOffButton.style.borderColor = 'white';
  body.style.backgroundColor = 'black';
});

darkModeOffButton.addEventListener('click', () => {
  darkModeOnButton.style.backgroundColor = 'black';
  darkModeOnButton.style.borderColor = 'black';
  darkModeOffButton.style.backgroundColor = 'white';
  darkModeOffButton.style.borderColor = 'black';
  body.style.backgroundColor = 'white';
  
  darkModeOffButton.disabled = false;
  darkModeOnButton.disabled = false;
});

Some more info:

Where the CSS and JS are added in "head"

  • I have two class=".wp-block-button" elements that I added to the header element of my site using the Wordpress Site-Editor; both of which I have styled in CSS, using this plugin. With the current code, when one is clicked, it is supposed to change the style of both buttons as well as the background colour. This seems to work correctly in Codepen, but won't respond in Wordpress for whatever reason. The initial CSS appears to apply correctly, but clicking on either button does nothing.

What I tried:

I tried inserting parts of the code in different places within the HTML, in part using the Google "Inspect" tool. I also tried looking for other "Dark-Mode" step-by-step solutions, and some other similarly worded questions here on stackoverflow, but nothing I have tried so far really helped; I feel like I am missing something fundamental...

(Grasping at straws, could the issue be that I have not enqueued the Javascript file into my functions.php; or generally have something to do with my Website's current version of PHP? Should I empty my browser cache?

I have been somewhat hesitant to go into and edit my theme files themselves, and was hoping that the plugin would work well enough...)

I am at a loss; I don't know where the issue is. Again, clicking either button does nothing, the initial CSS seems to style correctly, and it works just fine in CodePen. Could someone please point me in the right direction? Thank you. =)

Solution

  • Using the Google Inspect Tool Console to debug it turns out that the fix for me, in this case, was indeed rather simple:

    From the TypeError: cannot read properties of null reading ('addeventlistener'), I figured that my constants didn't exist yet; i.e. there were no elements to .getElementId("dark-mode-on") or "...-off)" from.

    I had added the JS as "linked internally"(1) and placed it in the "head", which meant that looking at the (index) file of my Website, the "script" was executed before the "body" tag: executing the code where the IDd elements still had to be read.

    My fix for this was to "link externally"(2) and load it using the plugin via a new HTML file, so that it is added in the "footer"(3); after the IDd elements were created.

    Now it works perfectly fine :)

    In my JS file, I also added

     window.onload=function(){/*Add my Code here*/}

    before changing those settings, and I am not sure whether this is now redundant... But I'll leave it as is for now.

    Updated CodePen: codepen.io/LenardG/pen/MWqRaRa

    (1) PNG Old Settings JS file

    (2) PNG New Settings JS file

    (3) PNG New HTML file Settings