Podemos implementar en nuestras páginas ó aplicaciones, el modo claro-oscuro ó light-dark, de diversas maneras, yo hoy, quiero informaros, sobre diferentes formas de hacerlo.
Desde hace años, prácticamente todos los sitios de internet, navegadores y sistemas operativos, tienen implementada esta carácteristica, es un recurso, de accesibilidad útil, para usuarios con problemas visuales, que en general ayuda, a descansar la visión de todos, y que también ahorra recursos de energia de los dispositivos de tus usuarios.
La forma más habitual, de incluir esta carácteristica en los sitios, es usándo javascript, como para todo, existen multiples librerias, ya empaquetadas, que incluyendolas en el <head> de tus documentos HTML, con su correspondiente <script src=""> </script>, ya implementarían esta funcionalidad, pero este es el recurso fácil, los que me conozcaís, ya sabreís, que a mi me gusta, tener el control de lo que incluyo, en mis páginas, y saber como funciona.
Yo en mi sitio, tengo un botón sencillo tuneado con iconos de fontawesome, en la cabecera a la derecha, que es el control para activar ó desactivar el modo light-dark. Este botón tiene un atributo personalizado data-*.
Entonces, como ya imáginaís, el botón, esta a la escucha del evento click, un tipico:
A cada click, se ejecuta, la función, que añade o quita, el modo dark, que por supuesto, también esta declarado, con todos los estilos que tiene, en su correspondiente archivo CSS, adicionalmente guarda las preferencias del usuario en su navegador, (localstorage), para que si sigue navegándo por el sitio, todas las páginas conserven el modo claro ú oscuro, que prefiera el usuario y por último, añade ó quita una clase al propió botón, que ejecuta el cambio que tiene al cliquearlo. Mira el sencillo código javascript con que se implementa todo esto.
Para terminar con esta sección, os aconsejaría, que para los estilos, empleaseis, variables CSS, púes facilitan mucho, la homogeneidad, de los estilos en el sitio web, y los posteriores cambios y mantenimiento de las páginas.
Pero, podemos conseguir, un efecto similar, al modo claro-oscuro, solo con CSS, te lo cuento en mi próxima sección, que si por casualidad, ya has cliqueado en el botón de la cabecera, observarás que no obedece a los estilos generales del documento.
Podemos implementar el modo claro-oscuro, solo con CSS, usándo media queries
Básicamente, añadiendo estas media queries, en tu CSS, junto con los estilos del modo light y el dark, el navegador, detecta automáticamente, el modo, en que tengá el usuario, su sistema operativo y adopta el modo a tu página.
Yo personalmente prefieró, darles la opción a mis usuarios, de cambiar, el modo claro-oscuro, independientemente, por lo que incluyo, controles para hacerlo, el de esta sección, es el que tienes debajo, clicalo si quieres observar, la transformación que hace toda la sección, y la explicación de como lo hagó, solo con CSS.
Mi botón de control, es un <input type="checkbox" id="dia_noche"> asociado a una <label for="dia_noche"></label>, son etiquetas, cuyo uso más habitual, es en los formularios, pero pueden emplearse, como en este caso, para otros usos.
Entonces si son iguales el atributo id del <input> y el for, de la <label>, cuando clicas, sobre la etiqueta, activas el estado :checked del <input>, que recordareís que es type="checkbox", es lo que yo empleó en mi CSS.
[type="checkbox"]:checked {....}
Son todos mis estilos css, del dark mode de esta sección.
Soy otra subsección, del modo oscuro, solo con CSS., no he podido resistirme, y con el selector :checked, para aplicar todos los estilos del modo oscuro de esta sección, he aprovechado para cambiar algún valor de la propiedad display: flex;, de la galeria de imágenes, convirtiendola en una exposición de cuadros.
Para ir concluyendo, deciros que he empleado selectores de CSS, como + ó ~, que sirven, para darle los estilos, a contenedores ó elementos, que ó bien vienen a continuación ó son hermanos del mismo elemento padre. Bueno, más alla, de mi codigo CSS particular, pienso que aquí, lo interesante era observar, el cambió total de fisonómia, que podemos darle a partes ó a toda una página, usando este recurso.
Profundizándo en el aprendizaje de HTML, CSS y JavaScript, puedes construirte, tus propias web, con tu estructura, tus estilos y tus funcionalidades.
Para conseguir esto, como siempre recomiendo, puedes dar click derecho y ver código fuente de las páginas que te interesen ó también tienes la herramienta dev tools del navegador, para exáminar la página a fondo, así es como yo he aprendido, y por supuesto prácticando mucho. Si tienes alguna sugerencia agradezco tu contacto, hasta la próxima.
