Consulta de medios CSS para una interfaz de usuario oscura o clara

El modo oscuro ha ido ganando mucho terreno últimamente. Por eso hemos añadido soporte para él en 4D v19, y hemos mencionado algunas formas de ajustarlo a sus necesidades en el anuncio relacionado.

En esta entrada del blog, nos centraremos en el CSS y explicaremos en detalle cómo establecer estilos CSS para los modos claros y oscuros utilizando consultas de medios CSS.

¿Qué es una consulta de medios?

En CSS, las consultas de medios son útiles cuando quieres modificar el aspecto de tu aplicación dependiendo de características específicas. 4D soporta la función media prefers-color-scheme, por lo que puede definir el comportamiento de un diálogo en modo claro y oscuro.

TIEMPO DE DEMOSTRACIÓN

Tomemos un ejemplo. En la aplicación Contactos, este es el aspecto de la luz en macOS:

Paso 1

Para cambiar el diseño de esta aplicación, elegimos

• cuatro colores para el texto y las líneas
• tres colores para el fondo

Definimos estos colores en un archivo CSS llamado «styleSheets.css». Esto es lo que contiene:

	.accentColor1 {
		stroke: #8594B2;
	}

	.accentColor2 {
		stroke: #DDDDDD;
	}

	.accentColor3 {
		stroke: #EEEEEE;
	}

	.accentColor4 {
		stroke: #C0C0C0;
	}

	.accentBackColor1 {
		fill: #AAAAAA;
	}

	.accentBackColor2 {
		fill: #EEEEEE;
	}

	.accentBackColor3 {
		fill: #444444;
	}

Cada color tiene una clase correspondiente llamada «accentColorX» o accentBackColorX».

Luego, dentro de la lista de propiedades, asignamos una clase CSS a cada objeto del formulario:

Paso 2

Activamos el modo oscuro en macOS. Este es el resultado:

Los objetos del formulario han cambiado automáticamente al Modo Oscuro. Sin embargo, el color de la etiqueta Nombre no va bien con el fondo oscuro, y el marco gris claro tampoco encaja bien.

Tenemos que cambiar el conjunto de colores. Después de algunas pruebas, finalmente tenemos nuestros cuatro colores de texto y nuestros tres colores de fondo.

Paso 3

Es el momento de definir estos colores para que

• si la interfaz está en modo claro, 4D utilice un determinado conjunto de colores
• si la interfaz está en modo oscuro, 4D utilice otro conjunto de colores

Las consultas de medios son útiles cuando necesita aplicar condicionalmente estilos a los formularios. Puede envolver las clases CSS del tema claro dentro de una consulta de medios con un valor establecido como claro, y las clases CSS del tema oscuro dentro de una consulta de medios con un valor establecido como oscuro:

@media (prefers-color-scheme: light){
	.accentColor1 {
		stroke: #8594B2;
	}

	.accentColor2 {
		stroke: #DDDDDD;
	}

	.accentColor3 {
		stroke: #EEEEEE;
	}

	.accentColor4 {
		stroke: #C0C0C0;
	}

	.accentBackColor1 {
		fill: #AAAAAA;
	}

	.accentBackColor2 {
		fill: #EEEEEE;
	}

	.accentBackColor3 {
		fill: #444444;
	}
}

@media (prefers-color-scheme: dark){
	.accentColor1 {
		stroke: #A1BFFC;
	}

	.accentColor2 {
		stroke: #4C4C4D;
	}

	.accentColor3 {
		stroke: #4D4D4D;
	}

	.accentColor4 {
		stroke: #46484A
	}

	.accentBackColor1 {
		fill: #7F7E7F;
	}

	.accentBackColor2 {
		fill: #444444;
	}

	.accentBackColor3 {
		fill: #CBCACB;
	}
}

Y esto es lo que obtenemos:

¿Qué es lo siguiente?

Si necesitas ayuda con CSS en 4D, te aconsejamos que leas esta entrada del blog o veas este vídeo de 30 minutos del 4D Summit.

Y como siempre, puede unirse a la discusión en elforo de 4D .