Quiero abrir un botón en mi sitio que permita a los usuarios cambiar al modo oscuro o claro cuando lo deseen. Seguí un tutorial e hice el modo oscuro, pero el problema es que el usuario tiene que presionar la tecla Intro para ingresar al modo oscuro. Pero quiero que haya un botón que los ayude a cambiar al modo oscuro o claro. Aquí está el código que yo usado en js: -
<script> window.onload = function () { document.onkeypress = function (e) { console.log(e); e = e || window.event; if (e.keyCode === 13) { document.documentElement.classList.toggle("dark-mode"); document.querySelectorAll(".inverted").forEach((result) => { result.classList.toggle("invert"); }); } }; }; </script>Y esto es lo que usé en css: -
.dark-mode { filter: invert(1) hue-rotate(180deg); } .invert { filter: invert(1) hue-rotate(180deg); }'La clase .invertida en js se debe a que no quiero que las imágenes inviertan sus colores... así que le di a todas las imágenes una clase = 'invertida'
Entonces, esto es lo que he hecho y alguien, por favor, déjeme saber cómo debo mostrar un botón que cambia al modo oscuro o claro en lugar de presionar la tecla Intro para ello.
¡Gracias!
Puede ejecutar la función en un evento onClick en su botón de esta manera:
<button onClick="toggleMode()">Toggle Mode</button> <script> function toggleMode () { document.documentElement.classList.toggle("dark-mode"); document.querySelectorAll(".inverted").forEach((result) => { result.classList.toggle("invert"); }) } </script>puede crear un botón en su página HTML y luego adjuntarle un detector de eventos.
function myfunction(e) { console.log("you clicked"); document.documentElement.classList.toggle("dark-mode"); document.querySelectorAll(".inverted").forEach((result) => { result.classList.toggle("invert"); }); } const btn = document.querySelector('.btn') btn.addEventListener('click', myfunction); <button class="btn">Dark Mode</button>Por cierto, ¿por qué estás usando la etiqueta de script dentro de una aplicación de reacción?