Requête média CSS pour une interface utilisateur sombre ou claire

Le mode sombre a gagné beaucoup de terrain récemment. C’est pourquoi nous l’avons ajouté à la version 19 de 4D et avons mentionné quelques moyens de l’adapter à vos besoins dans l’annonce correspondante.

Dans ce billet de blog, nous allons nous concentrer sur le CSS et expliquer en détail comment définir les styles CSS pour les modes clair et foncé à l’aide des requêtes média CSS.

Qu’est-ce qu’une requête multimédia ?

En CSS, les requêtes média sont utiles lorsque vous souhaitez modifier l’apparence de votre application en fonction de caractéristiques spécifiques. 4D prend en charge la fonction de média prefers-color-scheme, de sorte que vous pouvez définir le comportement d’une boîte de dialogue en mode clair et foncé.

TEMPS DE DÉMO

Prenons un exemple. Dans l’application Contacts, voici à quoi ressemble l’aspect lumineux sur macOS :

Étape 1

Pour modifier le design de cette application, nous avons choisi :

• quatre couleurs pour le texte et les lignes
• trois couleurs pour le fond

Nous avons défini ces couleurs dans un fichier CSS appelé « styleSheets.css ». Voici ce qu’il contient :

	.accentColor1 {
		stroke: #8594B2;
	}

	.accentColor2 {
		stroke: #DDDDDD;
	}

	.accentColor3 {
		stroke: #EEEEEE;
	}

	.accentColor4 {
		stroke: #C0C0C0;
	}

	.accentBackColor1 {
		fill: #AAAAAA;
	}

	.accentBackColor2 {
		fill: #EEEEEE;
	}

	.accentBackColor3 {
		fill: #444444;
	}

Chaque couleur a une classe correspondante nommée « accentColorX » ou accentBackColorX ».

Ensuite, dans la liste des propriétés, nous avons attribué une classe CSS à chaque objet du formulaire :

Étape 2

Nous avons activé le mode sombre sur macOS. Voici le résultat :

Les objets du formulaire sont automatiquement passés en mode sombre. Cependant, la couleur de l’étiquette Name ne va pas bien avec le fond sombre, et le cadre gris clair ne s’intègre pas bien non plus.

Nous devons modifier le jeu de couleurs. Après quelques essais, nous avons enfin nos quatre couleurs de texte et nos trois couleurs de fond.

Troisième étape

Il est temps de définir ces couleurs de sorte que :

• si l’interface est en mode clair, 4D utilise un certain jeu de couleurs
• si l’interface est en mode sombre, 4D utilise un autre jeu de couleurs.

Les requêtes média sont utiles lorsque vous devez appliquer des styles aux formulaires de manière conditionnelle. Vous pouvez intégrer les classes CSS du thème clair dans une requête média dont la valeur est définie sur light, et les classes CSS du thème sombre dans une requête média dont la valeur est définie sur 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;
	}
}

Et voici ce que nous obtenons :

Quelle est la suite ?

Si vous avez besoin d’aide avec CSS dans 4D, nous vous conseillons de lire cet article de blog ou de regarder cette vidéo de 30 minutes du 4D Summit.

Et comme toujours, vous pouvez participer à la discussion sur leforum 4D .