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.
La importancia del Contraste de Color en la web
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

Mantente Conectado

Dale poder al boletin semanal suscribiendote