Pues hoy crearemos un Selector de Contraste o Modo día/noche para nuestra web. Con él mejoraremos, ademas de la experiencia de usuario, nuestras habilidades, entendiendo un poco mas de LocalStorage.
Debo admitirlo, hay días en que ando perezoso y adicto a las librerías, terrible combinación, pero hoy no es uno de esos días. Basado en un hecho real, la diversión está garantizada.
Teoría y fundamentos a continuación. Si vienes por el demo o solo el código.
Contraste
Es la disparidad entre los tonos claros y los oscuros, es decir, cuanta más diferencia entre ellos, mas alto contraste tendremos, ideal para sitios mas atractivos y una mejor lectura. Escribí un interesante articulo complementario a medio hacer sobre la importancia del Color.
En superior A,B y C Representan el Alto Contraste. D,E y F Un medio/bajo contraste.
Beneficios. Porque usar
Además de unirte a la integración y hacer de la web un sitio mejor, no es secreto Google ama a la gente con tu espíritu, y lo premie mejorando tu posicionamiento. Los capos de Medium se refieren mas a esto en un excelente artículo escrito por Luis Pascual Cid.
Almacenamiento Local
LocalStorage es una propiedad HTML5 (IE8+) usada para almacenar información de forma indefinida o hasta eliminar los datos del navegador. También tenemos sessionStorage, con diferencia que la información se recuerda hasta cerrar la pestaña abierta.
Acordemos, las cookies y el almacenamiento local tienen diferentes propósitos. Las cookies son principalmente leídas de lado del servidor, y en contrario, LocalStorage por el lado del cliente. Entonces cuándo emplearse. Dependerá: ¿Quién necesitará estos datos: El cliente o el servidor?.
HTML5, Css y Javascript
Sin librerías externas. El modo nativo será suficiente.
HTML5
</main>
<h1>Día / Noche</h1>
<button aria-label="Contraste" role="switch" onclick="toggleLook()">Modo</button>
<main>
Un button nos servirá perfecto. No olvidemos añadir tags de accesibilidad Wai-Aria enriqueciendo y haciendo mas cool nuestras aplicaciones.
CSS
body {
transition: 0.5s;
background: #FFEC8B;
height:100vh;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
button{
font-family:'Helvetica', sans-serif;
border: none;
background: #000;
color: #FFF;
width: auto;
padding: 1.61rem 1rem;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
}
.modo-luna{
color: #EB4C49;
background: #2F3277;
}La clase CSS: modo-luna es la designada para comandar.
Javascript
<script>
const body = document.body;
if (localStorage.mode === 'dark') {
body.classList.add("modo-luna")
};
function toggleLook() {
body.classList.toggle("modo-luna");
localStorage.setItem(
'mode', localStorage.mode === 'light' || localStorage.mode === undefined ? 'dark' : 'light'
);
}
</script>
Mode será nuestro dato, que cargaremos con el valor dark o light, dependiendo de si este se asocia o no a nuestra clase CSS: modo-luna.
Con esto ya tenemos un Selector de Contraste que además recuerda los ajustes de color seleccionados por el usuario. Lo iré manteniendo e incorporando pronto al diseño del sitio. Si tienes el fuente listo con una nueva mejora, sumalo vía git.
Gracias lector.
Portada: Accessibility por Akshata Manthalkar