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>