En este post te mostraré como poder realizar el cambio entre temas blanco y oscuro en unos cuantos pasos.
Herramientas:
- Visual Studio Code (puede ser cualquier editor).
Pasos:
- Crearemos un archivo llamado index.html, donde introduciremos la estructura de la página.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Sitio</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="light-theme">
<h1>Lista</h1>
<p>Tareas actuales:</p>
<ul>
<li>Agregar estilos visuales</li>
<li>Agregar temas claros y oscuros</li>
<li>Habilitar cambiar el tema</li>
</ul>
<div>
<button class="btn">Dark</button>
</div>
<script src="app.js"></script>
</body>
</html>- Por el momento tendremos una conexión a los archivos CSS y JavaScript los cuales serán creados en un momento, para el cuerpo del contenido se le asigno un selector de clase al elemento body, el cual daremos interactividad dentro del JS, también encontraremos una lista con una serie de elementos y un botón con un selector de clase, el cual nos podrá servir posteriormente para realizar los cambios de temas, para poder verificar como se muestra en el navegador abriremos el archivo index.html en la carpeta donde se creo y podremos observar que es una lista con un botón sin diseño.
2. Ahora luego de haber hecho la estructura se le dará el diseño correspondiente usando CSS para ello creáremos un archivo llamado style.css donde se introducirá lo siguiente.
:root { /* Variables de pseudo-clase que se utilizarán globalmente*/
--green: #00ff00;
--white: #ffffff;
--black: #000000;
}
body {
background: var(--bg);
color: var(--fontColor);
font-family: Arial, Helvetica, sans-serif;
}
.light-theme {
--bg: var(--white);
--fontColor: var(--black);
--btnBg: var(--black);
--btnFontColor: var(--white);
}
.dark-theme {
--bg: var(--black);
--fontColor: var(--green);
--btnBg: var(--white);
--btnFontColor: var(--black);
}
.btn {
position: absolute;
top: 20px;
left: 250px;
height: 50px;
width: 50px;
border-radius: 50%;
border: none;
color: var(--btnFontColor);
background-color: var(--btnBg);
}- Al haber sido asignado anteriormente los selectores de clase al HTML, pasamos a modificar el CSS, primero se agregó unas variables dentro de la pseudo-clase :root, los cuales serán utilizados globalmente en el CSS, luego como se puede observar el selector body contiene propiedades que utilizan variables la cuales posteriormente son asignada a los selectores de clase light-theme y dark-theme y estos de la misma forma crean sus propias variables personalizadas utilizando los valores de la pseudo clase :root, por último se le da al botón una serie de propiedades para darle forma circular, cambiarle de posición y asignarle un color de fondo y de texto, al momento de cargar la página debería verse de la siguiente forma.
3. Ahora como se observa hubo un cambio de diseño pero aún la pagina no realiza cambio alguno sobre el tema ya que no le hemos dado la interacción, es por eso que ahora crearemos un archivo JavaScript llamado app.js en donde colocaremos lo siguiente:
const switcher = document.querySelector('.btn');
switcher.addEventListener('click', function() {
document.body.classList.toggle('light-theme');
document.body.classList.toggle('dark-theme');
const className = document.body.className;
if(className == "light-theme"){
this.textContent = "Dark";
} else {
this.textContent = "Light";
}
});- En este caso se creó una constante llamada switcher la cual utilizará un selector del CSS llamado .btn, a esta constante switcher le asignaremos un evento llamado click, junto a una función que se ejecutará cada vez que el elemento sea presionado de la misma forma irá cambiando el tema correspondiente entre los selectores light-theme y dark-theme los cuales se encuentran dentro del CSS, posteriormente se creará otra constante con el nombre de className y utilizara el selector el cual se ubica dentro del body del HTML por defecto la clase que se tiene es light-theme, así que cuando esto sea verdadero o falso se mostrará un texto en el botón, ya que todo esta sección de código se encuentra dentro de la constante switcher la cual contiene el selector del botón, el resultado final debería ser el siguiente.
