Cómo - Alternar el modo oscuro
Cambia entre el modo oscuro y claro con CSS y JavaScript.
Alternar clase
Paso 1) Agregar HTML:
Use cualquier elemento que deba almacenar el contenido para el que desea alternar el diseño. En nuestro ejemplo, usaremos <body>
por simplicidad:
Ejemplo
<body>
Paso 2) Agregar CSS:
Dale estilo al <body>
elemento y crea una .dark-mode
clase para alternar:
Ejemplo
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
Paso 3) Agregar JavaScript:
Obtener el <body>
elemento y alternar entre la .dark-mode
clase:
Ejemplo
function myFunction() {
var element =
document.body;
element.classList.toggle("dark-mode");
}
Sugerencia: consulte también Cómo agregar una clase .
Sugerencia: obtenga más información sobre la propiedad classList en nuestra referencia de JavaScript.