En la actualidad esta muy de moda colocar un efecto oscuro – claro en las web, este efecto consiste en cuando se hace click en un botón se cambia el color del fondo del sitio web para que la lectura sea mas cómoda a la vista y no lastime a los ojos, especialmente durante la noche.
Este efecto es posible gracias a la combinación de CSS 3 y Javascript y no es muy complicado de aplicar en sus proyectos web.
En este post les voy a mostrar paso a paso como realizar y de manera muy sencilla, con unas pocas líneas de código y un poco de css ya va a estar funcionando en cualquier web.
Antes de empezar les comento que no hace falta tener un conocimiento avanzado para poder implementar este truco, basta con saber lo mas básico de cualquier desarrollo, un poco de html, css y javascript
En la primera parte del proceso de colocar un modo oscuro para nuestra web es crear un botón que al realizar un click vamos a llamar a una función que mas adelante vamos a realizar con javascript
<button type="button" class="btn btn-dark" onclick="cambiarModo()">Oscuro / Claro</button>
Como pueden ver utilizo el onclick del button para poder llamar a la función cambiarModo(), es todo lo que necesitamos para el html.
Ahora vamos a trabajar con el javascript, la idea aquí es utilizar la etiqueta body e insertar ahí el código css para poder crear el efecto oscuro, en el siguiente ejemplo vamos a ver como funciona.
<script type="text/javascript">
function cambiarModo() {
var cuerpoweb = document.body;
cuerpoweb.classList.toggle("oscuro");
}
</script>
Y por último lo que nos toca es realizar la hoja de estilo donde debemos agregar las propiedades que son necesarias para poder realizar el efecto de un tema oscuro en html
.oscuro{
transition:.40s;
background-color: #1f1f1f;
color: #f1eded;
}
Notas
A tener un poco en cuenta que en este ejemplo no estoy teniendo en cuenta que si el usuario sale de la página actual va a perder el tema oscuro, una solución que lo realizare en un próximo tutorial es trabajar con sesiones y cookies para que el tema seleccionado quede con el usuario durante toda la visita y próxima visita que realice en el sitio web.
