title: Toggling a text on button using javascript
body: <p>I'm trying to create a dark mode toggle button and I require following text properties :-</p>
  <ol>
  <li><code>Turn on dark mode</code> should appear when theme is a light one</li>
  <li><code>Turn off dark mode</code> should appear if theme is dark one.</li>
  </ol>
  <p>Nothing more, Currently, I'm using follwing code to toggle between dark and light mode but the issue comes with button. I tried different codes but the text gets swapped in a wrong manner.
  <a href="https://codepen.io/vkdatta27/pen/oNxrxad" rel="nofollow noreferrer">https://codepen.io/vkdatta27/pen/oNxrxad</a>.</p>
  <pre><code>&lt;script&gt;const btn = document.querySelector(&quot;.btn-toggle&quot;);
  
  const currentTheme = localStorage.getItem(&quot;theme&quot;);
  if (currentTheme == &quot;dark&quot;) {
    document.body.classList.add(&quot;dark&quot;); 
  }
  
  btn.addEventListener(&quot;click&quot;, function () {
    document.body.classList.toggle(&quot;dark&quot;);
  
    let theme = &quot;light&quot;;
    if (document.body.classList.contains(&quot;dark&quot;)) {
      theme = &quot;dark&quot;; 
   
    }
  
    localStorage.setItem(&quot;theme&quot;, theme);
  });
  &lt;/script&gt;
  &lt;style&gt;
  .btn-toggle {
  border-radius: 20px;
  float: center;
  outline: none;
  border: 25px;
  padding: 10px;
  width: fit;
  font-size: 15px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align:center;
  box-shadow:  5px 5px 10px #5c5c5f, 
               -5px -5px 10px #ffffff;
  background-color: #101010;
  color: #e6e7ee;
  }
  body.dark .btn-toggle {
  box-shadow:  5px 5px 10px #121212, 
               -5px -5px 10px #4a4a4a;
  color: #101010 !important;
  background-color: #e6e7ee;
  }
  body.dark .btn-toggle a {
  color: #101010 !important;
  }
  body {background-color: #e6e7ee}
  body.dark {background-color: #101010; color:#ffffff}
  &lt;/style&gt;
  &lt;button class=&quot;btn-toggle&quot; id=&quot;btn-id&quot;&gt;&lt;/button&gt;
  </code></pre>