Variables CSS para temas claro/oscuro sin librerías
En el mundo del desarrollo web, ofrecer a los usuarios la posibilidad de elegir entre un tema claro y uno oscuro se ha convertido en una práctica común. Esto no solo mejora la experiencia del usuario, sino que también puede ayudar a reducir el desgaste ocular y aumentar la legibilidad en diferentes entornos. Una de las formas más eficientes de implementar esto es mediante el uso de variables CSS, también conocidas como custom properties.
Introducción a las variables CSS
Las variables CSS, definidas con el prefijo --, permiten almacenar valores que pueden ser reutilizados en todo el documento. Esto facilita la gestión de estilos y reduce la duplicación de código. Para implementar un tema claro y uno oscuro, podemos definir variables para los colores principales y secundarios, fondos, textos, etc.
Por ejemplo, podemos iniciar nuestro CSS con:
:root {
--color-primario: #3498db;
--color-secundario: #2ecc71;
--fondo: #ffffff;
--texto: #000000;
}Luego, podemos aplicar estos valores a nuestros elementos HTML:
body {
background-color: var(--fondo);
color: var(--texto);
}Cambiar entre temas
Para permitir el cambio entre el tema claro y el oscuro, podemos definir un conjunto de variables para cada tema y cambiar el conjunto activo según sea necesario. Una forma de hacerlo es mediante el uso de una clase en el elemento body o en un elemento contenedor principal.
Por ejemplo, para el tema oscuro:
.tema-oscuro {
--fondo: #2f2f2f;
--texto: #ffffff;
}Y para activar el tema oscuro, simplemente agregamos la clase tema-oscuro al body o al elemento contenedor:
<body class="tema-oscuro">
¡Contenido del sitio web!
</body>El cambio entre temas puede ser triggered por JavaScript, escuchando un evento de clic en un botón o elemento de interfaz, y agregando o removiendo la clase tema-oscuro según sea necesario.
Conclusión
Como hemos visto, usar variables CSS para implementar temas claro y oscuro en una web es una técnica poderosa y flexible. Nos permite mantener nuestro código limpio y fácil de mantener, y ofrece una experiencia personalizada para los usuarios. Al combinar esto con un poco de JavaScript para manejar el cambio de tema, podemos crear interfaces de usuario dinámicas y atractivas sin necesidad de recurrir a librerías adicionales.