CSS Media query per un’interfaccia utente scura o chiara

La modalità scura sta guadagnando molto terreno negli ultimi tempi. Per questo motivo abbiamo aggiunto il supporto per questa modalità in 4D v19 e abbiamo menzionato alcuni modi per adattarla alle vostre esigenze nel relativo annuncio.

In questo post ci concentreremo sui CSS e spiegheremo in dettaglio come impostare gli stili CSS per le modalità chiare e scure utilizzando le media query CSS.

Che cos’è una media query?

Nei CSS, le media query sono utili quando si vuole modificare l’aspetto dell’applicazione in base a caratteristiche specifiche. 4D supporta la funzione media prefers-color-scheme, per cui è possibile definire il comportamento di una finestra di dialogo in modalità chiara e scura.

TEMPO DI DEMO

Facciamo un esempio. Nell’applicazione Contatti, ecco come appare la luce su macOS:

Passo 1

Per modificare il design di questa applicazione, abbiamo scelto:

• quattro colori per il testo e le linee
• tre colori per lo sfondo

Abbiamo definito questi colori in un file CSS chiamato “styleSheets.css”. Ecco cosa contiene:

	.accentColor1 {
		stroke: #8594B2;
	}

	.accentColor2 {
		stroke: #DDDDDD;
	}

	.accentColor3 {
		stroke: #EEEEEE;
	}

	.accentColor4 {
		stroke: #C0C0C0;
	}

	.accentBackColor1 {
		fill: #AAAAAA;
	}

	.accentBackColor2 {
		fill: #EEEEEE;
	}

	.accentBackColor3 {
		fill: #444444;
	}

Ogni colore ha una classe corrispondente chiamata “accentColorX” o accentBackColorX”.

Poi, all’interno dell’elenco delle proprietà, abbiamo assegnato una classe CSS a ogni oggetto del modulo:

Passo 2

Abbiamo attivato la Modalità scura su macOS. Ecco il risultato:

Gli oggetti del modulo sono passati automaticamente alla Modalità scura. Tuttavia, il colore dell’etichetta Nome non si sposa bene con lo sfondo scuro e anche la cornice grigio chiaro non si adatta bene.

È necessario modificare il set di colori. Dopo alcune prove, abbiamo finalmente i nostri quattro colori di testo e i nostri tre colori di sfondo.

Passo 3

È il momento di definire questi colori in modo che:

• se l’interfaccia è in modalità chiara, 4D utilizza un determinato insieme di colori
• se l’interfaccia è in modalità scura, 4D utilizza un altro insieme di colori

Le media query sono utili quando è necessario applicare in modo condizionato gli stili ai moduli. È possibile avvolgere le classi CSS del tema chiaro all’interno di una media query con un valore impostato su light e le classi CSS del tema scuro all’interno di una media query con un valore impostato su dark:

@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;
	}
}

Ecco cosa si ottiene:

E ora?

Se avete bisogno di aiuto con i CSS in 4D, vi consigliamo di leggere questo post sul blog o di guardare questo video di 30 minuti del 4D Summit.

E come sempre, potete partecipare alla discussione sulforum 4D .