¿Cómo cambiar al modo oscuro?
- Página anterior Cambiar ocultar/mostrar
- Página siguiente Cambiar texto
Use CSS y JavaScript para cambiar entre modo oscuro y claro.
cambio de clase
Paso 1 - Añadir HTML:
use cualquier elemento para almacenar el contenido que desee cambiar de diseño. En nuestro ejemplo, para simplificar, usaremos <body>
:
<body>
Paso 2 - Añadir CSS:
establecer <body>
estilos del elemento y crear un botón de cambio .dark-mode
clases:
body { padding: 25px; background-color: white; color: black; font-size: 25px; } .dark-mode { background-color: black; color: white; }
Paso 3 - Añadir JavaScript:
obtener <body>
elemento y en .dark-mode
cambio entre clases:
function myFunction() { var element = document.body; element.classList.toggle("dark-mode"); }
páginas relacionadas
Tutorial:¿Cómo agregar una clase
Manual de referencia:Atributo classList del elemento DOM HTML
- Página anterior Cambiar ocultar/mostrar
- Página siguiente Cambiar texto