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

Traducido automáticamente de Deepl

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:

blank

Paso 2

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

blank

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:

blank

¿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 .

Vanessa Talbot
• Propietario de producto - Vanessa Talbot llegó al equipo de 4D Program en junio de 2014. Como Propietario de producto, está a cargo de escribir las historias de los usuarios y luego traducirlas a especificaciones funcionales. Su papel es también asegurarse de que la implementación de la funcionalidad entregada cumpla con las necesidades del cliente. Desde su llegada, ha trabajado en la definición de funcionalidades claves en 4D. Ha trabajado en la mayoría de las nuevas funcionalidades de multi hilo apropiativo y también en un tema muy complejo: la nueva arquitectura para la aplicación engined. Vanessa es licenciada por Telecom Saint-Etienne. Comenzó su carrera en el Instituto de Investigación Criminal como desarrolladora del departamento audiovisual. También ha trabajado en medios de comunicación y en el ámbito médico como experta en soporte técnico, producción y documentación de nuevas funcionalidades.