En este video aprenderás a implementar un Modo Nocturno (Dark Mode) en Javascript para tu sitio web utilizando HTML, CSS y JQuery. (Light Mode / Dark Mode).
Existen muchas maneras de implementar un modo nocturno dentro de un sitio web. Es por eso que te voy a mostrar cómo hacerlo de una manera muy sencilla, y sin escribir tanto código.
Como CREAR o IMPLEMENTAR Modo Nocturno en Javascript | Dark Mode en HTML, CSS y JQuery
Para eso, vamos a abrir el editor de código que utilizemos, en este caso Visual Studio Code. Abrimos la carpeta donde vamos a trabajar y si no la tienen creada, crean una nueva.
Dentro de la misma, vamos a crear primeramente 3 archivos.
- index.html: que serÃa la página principal
- dark.css: para colocar los estilos del modo nocturno
- light.css: para colocar los estilos del modo claro o normal
- styles.css: donde colocaremos los estilos que se utilizarán en ambos modos.
Una vez hecho eso, vamos al archivo index.html y colocando el signo de exclamación y presionando la tecla Enter en Visual Studio Code, se nos crea la plantilla HTML predeterminada.
Estructura basica de un documento HTML5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>Como AGREGAR Bootstrap a HTML
Ahora, vamos a agregar Bootstrap, que es un framework que nos ayudará bastante en el diseño de la página.
Para eso nos dirigimos a nuestro navegador y buscamos Bootstrap para implementarlo en nuestro archivo HTML.
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"><!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>Como AGREGAR JQuery a HTML
También, vamos a buscar JQuery, y lo vamos a implementar de la misma manera en ese mismo archivo.
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>AGREGAR Modo Nocturno en Javascript | Dark Mode en HTML, CSS y JQuery
Como mencioné anteriormente, existen diferentes maneras de implementar un modo nocturno en nuestro sitio web, en este caso vamos a hacer que al activar una casilla de verificación o checkbox, se cambie automáticamente al modo nocturno, y al desactivar la casilla vuelva nuevamente a la versión original.
Toggle Switch en CSS
Para eso, pueden buscar el diseño que más les guste para aplicar ese estilo en su sitio web, en este caso, utilizaré un diseño proporcionado por la siguiente página, ya que es bastante simple.
El código HTML lo copiamos en el archivo index.html
<!-- Rectangular switch -->
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
<!-- Rounded switch -->
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
Y el estilo lo copiamos en el archivo styles.css.
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}Al hacer esto podrán ver que al cargar la página web en el navegador, se les mostrará el interruptor (Toggle Switch), pero aún falta implementar la función que nos permitirá cambiar al modo nocturno.
Dark Mode CSS / Light Mode CSS
Para eso, vamos a adjuntar primeramente el archivo styles.css y el archivo light-theme.css en el archivo index.html.Â
<link href="styles.css" rel="stylesheet">
<link href="light-theme.css" rel="stylesheet">El archivo dark-theme.css lo implementaremos en la función jquery que crearemos más adelante.
Primero, vamos a implementar algunos estilos por separado. En el archivo light-theme.css, podemos colocar que el texto del cuerpo o el contenido de nuestro sitio web sea de color negro, que el color de fondo sea de un color blanco, y que los enlaces tengan un color azul o celeste.
body{
color:black;
background-color:whitesmoke;
}
a{
color: #2271b3;
}En el archivo dark-theme.css, vamos a hacer lo contrario justamente para que tengamos ese efecto, vamos a colocar el texto de color blanco, que el color de fondo sea de un color oscuro, y que los enlaces tengan un color fucsia, por ejemplo.
body{
color:white;
background-color:#333;
}
a{
color: #e30052;
}Una vez hecho eso, vamos al archivo HTML, y vamos a colocar algunas lÃneas de texto a modo de ejemplo.
Lorem ipsum dolor sit amet consectetur adipiscing elit donec, vel diam venenatis ridiculus magna et tincidunt mollis, sapien euismod senectus quis potenti nascetur montes. Cras habitant ac libero dis facilisi penatibus ultrices interdum, vestibulum blandit nec magnis diam hendrerit enim, vel accumsan fermentum litora tincidunt curae natoque. Felis nostra nec faucibus lacus mattis, arcu orci est nullam varius phasellus, egestas torquent maecenas tempor.
Como pueden ver, al cambiar manualmente por el modo nocturno, desde la lÃnea css que implementamos anteriormente. Podemos ver que cada uno de los estilos funcionan correctamente.
Modo Nocturno en JavaScript
Ahora vamos a crear la función que nos permitirá cambiar al modo nocturno al hacer click en el interruptor que colocamos anteriormente.
Para eso vamos a crear un archivo llamado main.js, donde colocaremos las siguientes lÃneas de código que nos permitirán crear este efecto al hacer click en el interruptor.
$('.checkbox').click(function(){
if ($('input.checkbox').is(':checked')) {
$(".theme").attr("href", "dark-theme.css");
}else{
$(".theme").attr("href", "light-theme.css");
}
});El código, básicamente lo que hace es verificar si el checkbox o la casilla de verificación se encuentra activa o inactiva. Si está activa, va a buscar la clase .theme y va cambiar el atributo href, es decir, la url por el estilo dark.css, y si no está activa va a cambiar la url por el estilo light.css.
Al guardar este archivo, y probarlo en en el navegador, podemos ver que el interruptor aún no funciona.
Esto ocurre, ya que tenemos que agregar las clases que colocamos en el archivo main.js, es decir en la lÃnea css donde adjuntamos el estilo light.css, agregamos la clase theme, y en el checkbox agregamos la clase checkbox.
<link href="light-theme.css" rel="stylesheet" class="theme">
<!-- Rounded switch -->
<label class="switch">
<input type="checkbox" class="checkbox">
<span class="slider round"></span>
</label>Una vez hecho eso, podrán ver que ahora al hacer click en el interruptor, podemos ver que se activa y desactiva correctamente el modo nocturno.
Recuerden que en el archivo dark.css, colocarán todos los estilos del modo nocturno, en el archivo light.css, los estilos del modo claro, y en el archivo styles.css, los estilos que utilizen ambos modos.
De esa manera, habrán podido implementar de manera muy sencilla un modo nocturno en cualquier proyecto en el que estén trabajando.
Si sabes de algún otro método que te resulte más sencillo, o te gustarÃa aprender sobre algo en particular hacemelo saber en los comentarios.