index.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 25px;
}

.dark-mode {
  background-color: black;
  color: white;
  
}
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}

.button5:hover {
  background-color: #555555;
  color: white;
}
</style>
</head>
<body>

<h2>Toggle Dark/Light Mode</h2>
<p>CLICK ON THE BUTTON BELOW TO SEE THE DARK MODE AND LIGHT MODE WITH CHANGE IN TEXT CONTENT ON THE BUTTON.</p>

<button id="btnmode" onclick="myFunction()" class="button button5"  value="myvalue"> DARK
</button>

<script>
    const btn = document.getElementById('btnmode');
    // ✅ Toggle button text on click
    btn.addEventListener('click', function handleClick() {
      const initialText = 'DARK';
      var element = document.body;
      element.classList.toggle("dark-mode");
    
      if (btn.innerHTML.toLowerCase().includes(initialText.toLowerCase())) {
        btn.innerHTML = 'LIGHT';
      } else {
        btn.innerHTML = initialText;
      }
    });
    
    /**
     * ✅ If you need to change the button's inner HTML use:
     *  - `innerHTML` instead of `textContent`
     */
</script>

</body>
</html>