CSS Media Query für eine dunkle oder helle UI

Der dunkle Modus hat in letzter Zeit stark an Bedeutung gewonnen. Deshalb haben wir in 4D v19 Unterstützung für diesen Modus hinzugefügt und in der entsprechenden Ankündigung ein paar Möglichkeiten genannt, wie Sie ihn an Ihre Bedürfnisse anpassen können.

In diesem Blog-Beitrag konzentrieren wir uns auf CSS und erklären im Detail, wie Sie CSS-Stile für helle und dunkle Modi mithilfe von CSS-Medienabfragen festlegen können.

Was ist eine Medienabfrage?

In CSS sind Media Queries nützlich, wenn Sie das Aussehen Ihrer Anwendung in Abhängigkeit von bestimmten Merkmalen ändern möchten. 4D unterstützt die Medienfunktion prefers-color-scheme, so dass Sie das Verhalten eines Dialogs im hellen und dunklen Modus definieren können.

DEMO-ZEIT

Lassen Sie uns ein Beispiel nehmen. In der Anwendung Kontakte sieht das helle Erscheinungsbild unter macOS so aus:

Schritt 1

Um das Design dieser Anwendung zu ändern, haben wir gewählt:

• vier Farben für Text und Linien
• drei Farben für den Hintergrund

Wir haben diese Farben in einer CSS-Datei namens „styleSheets.css“ definiert. Die Datei enthält Folgendes:

	.accentColor1 {
		stroke: #8594B2;
	}

	.accentColor2 {
		stroke: #DDDDDD;
	}

	.accentColor3 {
		stroke: #EEEEEE;
	}

	.accentColor4 {
		stroke: #C0C0C0;
	}

	.accentBackColor1 {
		fill: #AAAAAA;
	}

	.accentBackColor2 {
		fill: #EEEEEE;
	}

	.accentBackColor3 {
		fill: #444444;
	}

Jede Farbe hat eine entsprechende Klasse namens „accentColorX“ oder „accentBackColorX“.

Dann haben wir innerhalb der Eigenschaftsliste jedem Formularobjekt eine CSS-Klasse zugewiesen:

Schritt 2

Wir haben den Dark Mode auf macOS aktiviert. Hier ist das Ergebnis:

Die Formularobjekte haben automatisch in den dunklen Modus gewechselt. Allerdings passt die Farbe der Beschriftung Name nicht zum dunklen Hintergrund, und auch der hellgraue Rahmen passt nicht dazu.

Wir müssen den Farbsatz ändern. Nach einigen Tests haben wir schließlich unsere vier Textfarben und unsere drei Hintergrundfarben.

Schritt 3

Es ist an der Zeit, diese Farben so zu definieren, dass:

• Wenn sich die Schnittstelle im hellen Modus befindet, verwendet 4D einen bestimmten Satz von Farben
• Wenn die Oberfläche im dunklen Modus ist, verwendet 4D einen anderen Satz von Farben

Media-Queries sind nützlich, wenn Sie Stile bedingt auf die Formulare anwenden müssen. Sie können die CSS-Klassen des hellen Themas in eine Medienabfrage mit dem Wert light und die CSS-Klassen des dunklen Themas in eine Medienabfrage mit dem Wert dark einschließen:

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

Und das ist das Ergebnis:

Wie geht’s weiter?

Wenn Sie Hilfe bei CSS in 4D benötigen, empfehlen wir Ihnen, diesen Blogbeitrag zu lesen oder dieses 30-minütige 4D Summit Video anzusehen.

Und wie immer können Sie sich an der Diskussion im 4D Forum beteiligen.