Tengo el siguiente código para configurar el modo oscuro para el 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>
Si configuro document.body
en document.documentElement
, no funciona. ¿Alguien sabe cómo solucionarlo para el elemento raíz del HTML? También probé document.querySelector(":root");
.
Entonces, el código tal como lo tiene parece estar funcionando bien, tanto document.body
como document.documentElement
, por lo que el problema podría estar relacionado con dónde y cómo está importando el CSS.
Con 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>
Con 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>
Pero también como recomendación general, la entrada no debe estar envuelta en la etiqueta.
<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>