Tabla de contenido
Una vez más aquí. Hoy vengo a dejar un pequeño artículo por que me han preguntado estos días. Hace «relativamente poco tiempo» que en esta web incluí un botón para alternar entre modo claro y oscuro (está situado en el menú superior de la web). Un usuario que se fijó en ello, me preguntó ¿cómo podría crear un botón similar para utilizar en su sitio web?. Pues bien, en las siguientes líneas vamos a ver una forma bastante sencilla de crear un botón como ese. Al menos los conceptos serán muy parecidos.
Hoy en día el modo oscuro gana popularidad en las aplicaciones (de móvil y escritorio) y páginas web. Esto es así, porque resulta más cómodo de ver (al menos en eso si estoy totalmente de acuerdo), y algunos dicen que ahorra batería en los dispositivos móviles (aun que de esto no sé si es realmente cierto).
Como esto del utilizar un tema claro tiene algunos beneficios, y utilizar un tema oscuro, tiene otros, resulta bastante recomendable brindar a los usuarios la posibilidad de cambiar entre los modos oscuro y claro en las aplicaciones web. De esta manera, cualquiera puede elegir el tema que mejor le funcione en su día a día.
Como decía, un botón para alternar entre modos, es un elemento de la interfaz de usuario que permite a los usuarios cambiar entre dos estados. Sería algo como pasar de encendido a apagado. En el contexto de los modos oscuro y claro, se usaría un botón para alternar entre los dos esquemas de color.
En las imágenes que estamos viendo en este artículo, el botón está en el estado ‘encendido’ cuando el círculo está en el lado izquierdo. Esto hará que el esquema de color actual se encuentre en el modo de luz. Cuando se hace clic en el botón de alternar, el círculo se mueve hacia el lado derecho, y el esquema de color cambia al modo oscuro, como lo indica el cambio de color del fondo, de texto y el botón de alternar.
Una vez visto el funcionamiento de este sencillo ejemplo, ahora veremos cómo se puede crear el botón para alternar entre el modo claro y oscuro. Para ello utilizaremos un poco de HTML y algunas reglas CSS.
Si te interesa crear el botón para alternar entre modo oscuro/claro, tan solo será necesario que seguir los siguientes pasos:
- Vamos a crear una carpeta, con un nombre descriptivo.
- Crearemos un archivo llamado index.html.
- Continuamos creando otro archivo, pero esta vez lo llamaremos style.css.
- También vamos a crear una subcarpeta llamada img. En ella es donde tendremos que añadir dos imágenes .svg. Estas van a representar al sol y a la luna. Aquí habrá que poner las imágenes que cada uno quiera. Yo no las voy a proporcionar.
Una vez que creados los archivos y carpetas. Dentro de los archivos vamos a pegar los códigos proporcionados en los archivos corespondientes.
Botón para alternar entre modo claro y oscuro con HTML y CSS
Archivo index.html
El código HTML que vamos a ver a continuación, nos va a servir para crear una página web en la que mostrar un botón de alternancia entre modo oscuro y claro. Esto lo conseguiremos gracias al elemento de tipo «checkbox» con una etiqueta asociada (label) y dos imágenes (sol y luna) como iconos (.svg).
La etiqueta «input» define un checkbox con un «id» de «dark-mode». La etiqueta «label» asocia el checkbox con su contenido, en este caso, un contenedor de iconos con dos imágenes dentro. La clase «icon-container» especifica la posición absoluta y el centrado de los iconos.
El atributo «for» en la etiqueta «label» hace que cuando se haga clic en el contenido de la etiqueta, se cambie el estado del checkbox. Al hacer clic, se alternará entre mostrar el icono del sol y el icono de la luna.
El contenido de la etiqueta «div» con la clase «background» incluirá un encabezado que muestra el texto «Alternancia oscuro/claro«, el cual cambiará de color según el modo elegido.
Dentro del archivo index.html, vamos a pegar el siguiente código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Botón de alternancia Modo oscuro/claro</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<input type="checkbox" id="dark-mode" />
<label for="dark-mode">
<div class="icon-container">
<img class="sun" src="./img/sol.svg" alt="Icono sol" />
<img class="moon" src="./img/luna.svg" alt="Icono luna" />
</div>
</label>
<div class="background">
<h1>Alternancia oscuro/claro</h1>
</div>
</body>
</html>Archivo style.css
Este código es un estilo CSS que se va a aplicar a la anterior página HTML. Con este vamos a definir la apariencia y la animación del botón para la alternancia entre modos. Algunas de las reglas que vamos a utilizar afectan a:
- Se definen los estilos generales para todos los elementos de la página, incluyendo la fuente, el margen y el tamaño de los contenidos.
- El body se define como un elemento flexible con una anchura y altura del 100%, además de un alineamiento centrado.
- Se define el estilo para el elemento «label» y su pseudo-elemento «after«, que se usa como indicador visual para mostrar si el botón está activado o no.
- Se utiliza el selector «input:checked+label» para definir el estilo cuando el botón está activado. Se hacen cambios en la posición, la apariencia y la animación de los elementos.
- Se definen los estilos para las imágenes «sol» y «luna«, que representan los iconos para el modo claro y oscuro, respectivamente.
- Se utiliza el selector «input:checked» para mostrar/ocultar las imágenes según si el botón está activado o no.
- Finalmente, se define el contenedor de iconos y el elemento «background«, que representa el fondo de la página.
Teniendo esto claro, vamos a pegar el siguiente código dentro del archivo style.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
label {
position: relative;
width: 480px;
height: 180px;
background: #d9d9d9;
border-radius: 100px;
cursor: pointer;
box-shadow: inset 0 5px 15px rgba(0, 0, 0, 0.3), inset 0 -5px 15px rgba(255, 255, 255, 0.3);
}
label::after {
content: '';
position: absolute;
height: 160px;
width: 160px;
background: #f2f2f2;
border-radius: 100px;
top: 10px;
left: 10px;
transition: 0.5s;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
input:checked+label::after {
left: 470px;
transform: translateX(-100%);
background: linear-gradient(180deg, #777, #3a3a3a);
}
input:checked~label {
background: #242424;
}
.background {
position: absolute;
width: 100%;
height: 100vh;
background: #fff;
z-index: -1;
transition: 0.5s;
}
input:checked+label+.background {
background: #000000;
color: #fff;
}
input {
display: none;
}
.sun {
position: absolute;
transition: 0.5s;
width: 100px;
top: 50%;
transform: translateY(-50%);
left:5%;
}
.moon {
display: none;
transition: 0.5s;
width: 60px;
height: 60px;
}
input:checked~label .sun {
display: none;
}
input:checked~label .moon {
display: block;
z-index: 100;
position: absolute;
right: 45px;
top: 50%;
transform: translateY(-50%);
}
.icon-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: space-between;
width: 95%;
z-index: 1;
}
.background>h1 {
margin-top: 5% !important;
}Y con todos estos códigos, vamos a poder disponer de un botón para alternar entre modo claro y oscuro. Si quieres ver este código funcionando, puedes seguir el siguiente link.