El diseño en modo oscuro (dark theme) en la web se ha habilitado en diferentes aplicaciones muy conocidas como Twitter, Gmail, Facebook entre otros, los usuarios lo pueden habilitar la opción ya sea por gusto, estética o relajación visual.
En esta guía te te voy a enseñar como crear y cambiar de manera dinámica tu diseño web a modo oscuro (dark) o modo claro (light) con JavaScript.
El resultado que obtendremos es algo así:
Prepara tu ambiente de trabajo
- Necesitaras un editor de código para trabajar con los archivos Html, Css y Js. yo utilizó Visual Studio Code, puedes utilizar también, Sublime Text o cualquiera con el que te sientas cómodo.
- Crear un directorio eg. dark-theme, y en el crear 3 archivos: index.html, style.css y script.js (sí, se podría hacer en un solo archivo, pero pensando en escalar el proyecto, de esta manera quedara mejor organizado).
- Abrir el directorio de nuestro proyecto en el editor de código. Listo, a trabajar!
1. Estructura el contenido y agrega los archivos necesarios
Para comenzar a hacer tu web, lo primero que deberás hacer es estructurar el contenido que deseas mostrar, haciendo uso de etiquetas html.
- Crear una estructura base html
- En el head, agregar la herramienta Font Awesome, utilizando el CDN de la paàgina, esta nos facilitará el diseño de un boton icon, con el cual se cambiará el tema entre claro|oscuro.
- Agregar la hoja de estilos (style.css).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Agencia creativa</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
</body>
</html>
- En el body agregar el contenido textual en una etiqueta h1.
- Antes de cerrar la etiqueta de finalizar el body agregar el script (script.js).
<body>
<div class="cambiar-tema">
<button id="btn-dark" type="button" class="btn icon" value="dark" onclick="cambiarTema(this.value)">
<i class="fas fa-moon"></i>
</button>
<button id="btn-light" type="button" class="btn icon" value="light" onclick="cambiarTema(this.value)">
<i class="fas fa-sun"></i>
</button>
</div>
<section>
<h1>
Estamos creando. <br>
Estamos desarrollando. <br>
Estamos <span class="text-primary">inspirando.</span>
</h1>
<a class="primary-link" target="_blank">QUIERO SER PARTE!</a>
</section>
<script src="./script.js"></script>
</body>
2. Definir variables globales
En la hoja de estilos, define 2 grupos de variables globales con los colores de la paleta de colores de tu diseño. Para esto utilizamos la pseudo-clase :root, así:
/* variables de color para tema primario 'light' */
:root {
--primary: #f35b5d;
--acolor: #ffffff;
--bcolor: #dadada;
--ccolor: #242424;
--dcolor: #000000;
}
/* variables de color para tema secundario 'dark' */
:root [data-theme="dark"] {
--primary: #f35b5d;
--acolor: #000000;
--bcolor: #242424;
--ccolor: #dadada;
--dcolor: #ffffff;
}
Agregar estilos para el contenido que fue definido en el html, utilizando las variables creadas para dar color a los elementos.
/* Para todo el cuerpo del documento */
body {
max-height: 100vh;
font-family: Arial, sans-serif;
background-color: var(--acolor);
color: var(--ccolor);
}
/* Botones para cambiar tema */
.cambiar-tema {
position: absolute;
right: 70px;
top: 70px;
}
.cambiar-tema #btn-light {
display: none;
}
.cambiar-tema .btn {
margin: 0px;
background-color: transparent;
border: none;
}
.cambiar-tema .btn i {
color: var(--primary);
font-size: 25px;
transition: 0.1s;
}
.cambiar-tema button i:hover {
color: var(--primary);
transform: scale(1.2);
}
button:focus {
outline: none;
}
/* Contenido */
section {
max-width: 800px;
height: 100%;
margin: 15% auto 0 auto;
}
section h1 {
color: var(--dcolor);
font-size: 45px;
}
section .text-primary {
color: var(--primary);
}
/* Enlace principal */
a.primary-link {
background-color: var(--bcolor);
padding: 10px 25px;
border-radius: 25px;
}
a.primary-link:hover {
background-color: var(--primary);
color: #ffffff;
}
3. Agregar función Js
Al momento de crear la estructura de Html, agregamos un bloque con 2 botones, cada uno lleva un atributo value=»tema a seleccionar» y el evento onclick=»cambiarTema(this.value)», al presionar el botón se ejecuta el evento onclick y llama a la funcion cambiarTema, enviandole por parámetro el tema que queremos activar.
En el script.js agregamos la siguiente función, es bastante sencilla, al recibir el parámetro del tema seleccionado setea el grupo de estilos que corresponden y listo! podemos ver como cambia nuestro tema con cada click de manera automática.
function cambiarTema(tema) {
switch (tema) {
case "dark":
document.getElementById("btn-dark").style.display = "none";
document.getElementById("btn-light").style.display = "block";
document.documentElement.setAttribute("data-theme", "dark");
break;
default:
document.getElementById("btn-dark").style.display = "block";
document.getElementById("btn-light").style.display = "none";
document.documentElement.setAttribute("data-theme", "light");
break;
}
}
4. Tip extra! Utilizando LocalStorage
Si actualizamos la página, entonces se puede ver que se pierde nuestra configuración de tema, para evitar esto, una manera es almacenar la configuración en el localStorage del navegador.
¿Cómo funciona?
El objeto Storage (API de almacenamiento web) nos permite almacenar datos de manera local en el navegador, sin necesidad de realizar alguna conexión a una base de datos. Entonces:
- Utilizar localStorage.setItem(nombre, valor); para guardar una clave con el valor que se seleccione.
- Utilizar localStorage.getItem(nombre); para recuperar la clave con el último valor guardado.
- Con la clave recuperada, ejecutar la función cambiarTema(nombre), y enviar la clave por parámetro.
this.init();
function init() {
var tema = localStorage.getItem("tema");
this.cambiarTema(tema);
}
function cambiarTema(tema) {
switch (tema) {
case "dark":
localStorage.setItem("tema", 'dark');
document.getElementById("btn-dark").style.display = "none";
document.getElementById("btn-light").style.display = "block";
document.documentElement.setAttribute("data-theme", "dark");
break;
default:
localStorage.setItem("tema", 'light');
document.getElementById("btn-dark").style.display = "block";
document.getElementById("btn-light").style.display = "none";
document.documentElement.setAttribute("data-theme", "light");
break;
}
}
Esto es todo! ¿Tenias idea de que manera podías hacer estos cambios para estilos en tu web? ¡Te leo en los comentarios!
Ver en codepen.
Ver versión con angular en stackblitz.
You should take part in a contest for one of the greatest blogs on the web. I most certainly will recommend this website!