Vamos a programar #99 - Modo obscuro en CSS 3.

 Hola de nuevo a todos, el día hoy vamos a ver como aplicar el modo obscuro a una página web de manera sencilla.

Si te has dado vueltas por el blog, podrás observar que ahora, dependiendo de la configuración del sistema operativo-navegador, la página cambia de color, si el tema es obscuro, la página también lo será y si es claro, pasa lo mismo.

Para poder aplicar un tema de un color para cada caso, existe una forma sencilla de hacerlo y para poder apreciarlo mejor, vamos a ver un ejemplo con los estilos para la calculadora de Vigenere.

Para empezar, veamos cuales son los estilos actuales (dependiendo de cuando leas esto, los estilos pudieron haber cambiado, para que no haya problema puedes ir y revisar el código fuente de la página en vivo).

.h1v
{
    font-size: 16px;
}
.formVigenere{
    font: 95% Arial, Helvetica, sans-serif;
    max-width: 400px;
    margin: 10px auto;
    padding: 16px;
    background: #000;
}
.textareaV
{
    width: 100%;
    height: 150px;
    padding: 5px 8px;
    box-sizing: border-box;
    border: 2px solid #999;
    border-radius: 4px;
    resize: none;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.textareaV:focus
{
    width: 100%;
    height: 150px;
    padding: 2px 5px;
    box-sizing: border-box;
    border: 2px solid #50b;
    border-radius: 4px;
    resize: none;
}

.TextV
{
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #999;
    border-radius: 4px;
}

.ButtonV
{
width: 100%;
    background-color: #57a2e2;
    border: none;
  border-radius: 4px;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.ButtonV:hover
{
width: 100%;
    background-color: #224360;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

En CSS3, podemos definir clases que serán estilos para los objetos, cada vez que se le asigne una clase a un objeto, si está definido, este tomara la apariencia que la clase diga, pero además es posible sobrecargar ciertos estilos. En este caso, el primero paso para poder aplicar un tema obscuro, debemos de definir los estilos que serán predeterminados y para esto asumiremos que el estado normal siempre será el tema claro y la mayor parte del tema se basara en este.

Si observamos el caso de nuestro formulario tenemos que el texto es de color negro, el fondo es de color gris claro, los botones son de color azul claro y el área de las cajas de texto es blanco. Para poder idear un esquema de colores para el caso del tema obscuro, uno pensaría que bastaría con invertir los colores, pero no siempre es tan sencillo.

Si observamos la imagen de nueva cuenta, es el resultado de invertir los colores y si no está tan mal, hay que tener en cuanta cual es el color base del tema, en el caso del blog, la mayoría de elementos son de color azul y deberíamos de tratar de preservar la mayor parte de elementos de este color. 

Analizando las partes del formulario, observamos que consta de los siguientes elementos: etiquetas, cajas de texto, botones de opción, botones y el área del formulario. Si por ejemplo observamos que las etiquetas tienen el fondo transparente y el color de las letras es negro, bastará con cambiar el área del formulario que directamente afecta el color de fondo de las etiquetas, que al ser transparentes tomaran el color del área del formulario y por lo cual solo debemos de ocuparnos del color del texto. Para eso bastara con tener en cuenta que para el área del formulario queremos un color muy oscuro o simplemente negro, para las etiquetas vamos a querer un color claro o blanco y para poder elegir uno adecuado, podemos usar las herramientas que nos ofrecen la mayoría de navegadores.

En google chrome si presionamos F12 se abrirá las herramientas para desarrolladores y podremos inspeccionar los elementos que la conforman, al poner el ratón sobre un elemento, se mostraran algunas propiedades y veremos que hay una que dice "Contrast" si aparece un icono de exclamación (cómo en la imagen anterior) quiere decir que la combinación de colores podría resultar difícil de leer.

En cambio si aparece una marca verde, eso indica que la combinación es adecuada para la lectura, pero además nos sirve para crear nuestro esquema de colores.

La ventaja del color azul que seleccioné para el blog es que  resalta, pero no solo en colores oscuros, si no también en los obscuros, por eso podemos cambiar el área del formulario, el color  de las letras en las  etiquetas y con eso bastaría para que la lectura sea agradable em ambos modos: obscuro y claro.

Una vez que hemos determinado que es lo que se va a cambiar, en CSS3 existe una clase o consulta (queries) en la cual se va a aplicar cierto estilo basado en la configuración del sistema operativo, en este caso va a ser en el aspecto, tanto windows cómo Mac os tienen un ajuste en el cual se puede establecer si la mayor parte de los elementos serán claros o obscuro, pero además la mayoría de los navegadores tienen está misma opción.

Para hacer uso debemos usar "@media (prefers-color-scheme: dark)" y cuando el sistema operativo, navegador diga que se debe de usar el tema oscuro, todas las clases que estén aquí se aplicaran automáticamente sobrecargando las actuales (si se usan).

en nuestro caso, veamos que la definición para el área del formulario es:

.formVigenere{
    font: 95% Arial, Helvetica, sans-serif;
    max-width: 400px;
    margin: 10px auto;
    padding: 16px;
    background: #eee;
}

para hacer el cambio, dentro de "@media (prefers-color-scheme: dark)", debemos de crear una subclase que sera igual a la queremos modificar, en este caso, ".formVigenere" y solo incluiremos las propiedades que se van a cambiar en función al color, por lo que tendríamos algo así:

@media (prefers-color-scheme: dark) {
.formVigenere{
  background: #000;
  }

Para cada elemento iremos haciendo lo mismo hasta cubrir los cambio necesarios.

Y bien, por ahora es todo, cómo podrás ver, resulta sencillo hacer el cambio de esquemas y sirve de introducción para poder crear una variedad de temas y no solo claro y obscuro.

Los leo luego.