Como CREAR o IMPLEMENTAR Modo Nocturno en HTML, CSS y JavaScript (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/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"><!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/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 HTML, CSS y JavaScript (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.
 |
| https://www.w3schools.com/howto/howto_css_switch.asp |
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 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.
Publicar un comentario