Die Unterstützung für den dunklen Modus unter macOS ist da.

Der dunkle Modus ist großartig und schafft ein aufregendes Benutzererlebnis. Deshalb unterstützt 4D ab 4D v19 jetzt den Dark Mode, der automatisch aktiviert wird, wenn der Dark Mode auf macOS-Ebene eingeschaltet ist.

Dies ist nur der Anfang. In zukünftigen Versionen wird der Dark Mode für alle Komponenten (z. B. für das 4D Write Pro Widget) und den Design Mode unterstützt.

Möchten Sie sehen, wie der Dark Mode das Aussehen von 4D Elementen verändert? Lesen Sie weiter!

Formulare passen sich automatisch an

Wenn die Schriftart, der Rahmen und die Hintergrundfarbe Ihrer Formularobjekte bereits auf „automatisch“ eingestellt sind, brauchen Sie nichts zu ändern, Ihre Formulare passen sich automatisch an das Betriebssystemthema an.

Wir haben auch die Bibliotheksobjekte aktualisiert, um den hellen und dunklen Modus zu unterstützen, mit Ausnahme der Objekte „Rich text area“ und „4D Write Pro Interface“, die in einer zukünftigen Version angepasst werden.

CSS für helles und dunkles Erscheinungsbild

Wenn Sie benutzerdefinierte Farben definiert haben, um der grafischen Charta eines Unternehmens zu folgen, können Sie einen CSS-Stil sowohl für den hellen als auch für den dunklen Modus definieren. Auf diese Weise passt sich Ihre Anwendung vollständig an die Einstellungen des Betriebssystems an.

Umrahmen Sie einfach die CSS-Klassen mit einer Medienabfrage, die auf den hellen Wert eingestellt ist, und machen Sie dasselbe mit dem dunklen Wert.

Im folgenden Beispiel wird schwarzer Text auf weißem Hintergrund für den hellen Modus und weißer Text auf schwarzem Hintergrund für den dunklen Modus festgelegt.

@media (prefers-color-scheme: light) {
 .textTheme {
    fill: MidnightBlue;
    stroke: black;
  }
}

@media (prefers-color-scheme: dark) {
  .textTheme {
    fill: MidnightBlue;
    stroke: LightGrey;
  }
}

Wenn Sie mit CSS in 4D nicht vertraut sind, empfehlen wir Ihnen, diesen Blogbeitrag zu lesen oder dieses 30-minütige 4D Summit Video anzusehen.

Bilder UND Icons

Möglicherweise müssen Sie neue Bilder für das dunkle Erscheinungsbild Ihrer Anwendung erstellen. Diese neuen Bilder haben denselben Namen wie die der hellen Version, gefolgt von „_dark“, und werden neben diesen platziert:

Sie brauchen in 4D nichts zu ändern. Je nach Aussehen des Formulars wird das richtige Bild geladen.

PARTIELLER DUNKELMODUS und mehr

Wenn Sie noch nicht bereit sind, Zweifel haben oder ein Thema für eine Komponente erzwingen wollen, können Sie die Änderungen nicht auf die gesamte Anwendung anwenden, sondern nur auf ein Formular. Sie können Ihr Thema auch an das Thema der Host-Datenbank oder an Ihre Betriebssystemeinstellungen anpassen.

Anwendungsebene

Sie können den Wert für das Farbschema im Einstellungsdialog oder per Code mit dem neuen SET APPLICATION COLOR SCHEME Befehl. Die möglichen Werte sind:

• dunkel
• hell
• geerbt

Der geerbte Wert bedeutet Folgendes:

• wenn Sie sich in einer Komponente befinden, folgen Sie der Farbe der Host-Datenbank
• wenn Sie sich in einer Host-Basis befinden, folgen Sie der Farbe des Betriebssystems

Formular-Ebene

In Ihrer Anwendung sind einige Dialoge nicht für ein dunkles Erscheinungsbild geeignet. Color Scheme ist eine neue Formulareigenschaft, mit der Sie ein helles oder dunkles Erscheinungsbild eines Formulars erzwingen können.

Was kommt als Nächstes?

Sie haben eine lange Reise in die Dunkelheit hinter sich. Wenn Sie Fragen oder Anmerkungen haben, beteiligen Sie sich bitte an der Diskussion im 4D Forum!