title: How to change H2 color when BODY element's background color is toggled ON/OFF (CSS Class) by clicking a button?
body: <p>How can I change the H2 color, when the background color of BODY is (in my case toggled sea blue when a button is clicked) toggled ON/OFF using a CSS Class (containing the required background color style)? </p>
  
  <p><img src="https://i.stack.imgur.com/2QaEG.png" alt="CSS class defined in HTML doc"></p>
  
  <p>I used the following conditional inside the callback function for my event listener, which is supposed to check if the button is clicked or not. </p>
  
  <p><img src="https://i.stack.imgur.com/rz2Ji.png" alt="Logic to check if the button is clicked and then check for the background color"></p>
  
  <p>The problem here is though that I don't see the color of H2 change when the BODY background is <code>#42f4df</code>. My conditional only runs the else part of the code I'm assuming.
  How can I fix this and make my H2 change color accordingly?
  I've attached the images of the result I see too.</p>
  
  <p><strong>Initially</strong>
  <img src="https://i.stack.imgur.com/fCpBO.png" alt="1. Initially"> </p>
  
  <p><strong>Click the button once</strong>
  <img src="https://i.stack.imgur.com/AXQnq.png" alt="2. Click the button once"></p>
  
  <p><strong>Click the button once again</strong>
  <img src="https://i.stack.imgur.com/GgKYJ.png" alt="3. Click the button again"></p>