Can't set attribute of document.documentElement;

Question

I have following code to set the dark mode for the document.body

function myFunction() {
  var element = document.body;
  element.classList.toggle("dark-mode");
}

.dark-mode {
  background-color: black;
  color: white;
}

<label class="switch">
  <input onclick="myFunction()" type="checkbox">
  <span class="slider round"></span>
</label>

If I set the document.body to document.documentElement it does not work. Does someone know how to fix it for the root element of the HTML? I also tried document.querySelector(":root");.

Answer 1

So the code as you have it seem to be working fine, both document.body and document.documentElement, so the issue might be related on where and how you are importing de CSS.

With document.documentElement

<style>
    .dark-mode {
  background-color: black;
  color: white;
}
</style>
<label for="toggle" class="switch">
    Toggle
    <input onclick="myFunction()" type="checkbox">
    <span class="slider round"></span>
  </label>
  
  
  <script>
    function myFunction() {
      var element = document.documentElement;
      element.classList.toggle("dark-mode");
    }
  </script>

With document.body

<style>
    .dark-mode {
  background-color: black;
  color: white;
}
</style>
<label class="switch">
    Toggle
    <input onclick="myFunction()" type="checkbox">
    <span class="slider round"></span>
  </label>
  
  
  <script>
    function myFunction() {
      var element = document.body;
      element.classList.toggle("dark-mode");
    }
  </script>

But also as a general recommendation de input shouldn't be wrapped in the label tag.

<style>
    .dark-mode {
  background-color: black;
  color: white;
}
</style>
<label for="toggle" class="switch">
    Toggle
  </label>
  <input id="toggle" name="toggle" onclick="myFunction()" type="checkbox">
    <span class="slider round"></span>
  
  
  <script>
    function myFunction() {
      var element = document.body;
      element.classList.toggle("dark-mode");
    }
  </script>