Warum den Dunkelmodus?

Wer liebt den Dunkelmodus nicht? Heutzutage ist er überall – von Ihrer Lieblingswebsite und Ihren Desktop-Anwendungen bis hin zu Ihren Mobilgeräten. Was das Kundenerlebnis angeht, ist er ein großartiger Pfeiler, den Sie Ihrem Köcher hinzufügen können, um ein reibungsloses Erlebnis zu bieten, das die Benutzer zu schätzen wissen. Das wirft also die Frage auf: „Wie implementiere ich den Dunkelmodus in meinem Mendix Anwendung?"

Ich bin hier, um Ihnen zu sagen, wie das geht. Und es ist ganz einfach!

Als erstes werden wir eine Anwendung finden, die die Dunkelmodus-Behandlung benötigt. Für diejenigen unter Ihnen, die am letzten Mendix Welt, kennen Sie vielleicht Lato Bikes – das Unternehmen, das wir gegründet haben, um ein Mendix Adoptionsreise in Johan den Haans Grundsatzrede.

Insbesondere die Produktseite ist sehr hell und könnte einen Dunkelmodus vertragen. Schauen wir uns an, wie wir das erreichen.

Dunkelmodus, Schritt für Schritt

Zunächst fügen wir unserem Projekt ein neues Modul namens DarkMode hinzu und weisen dem Modul eine einzelne Benutzerrolle zu (jeder sollte den Dunkelmodus verwenden dürfen!). In diesem neuen Modul erstellen wir eine SASS-Datei namens _darkmode.scss. – Stellen Sie sicher, dass Sie sie als Import zur Hauptdatei hinzufügen!

Als Nächstes beginnen wir in unserer neuen SASS-Datei mit dem Erstellen unseres dunklen Designs. Ich mache es gerne als Überschreibung für alles, also beginne ich normalerweise mit so etwas:

HTML-Text {

Hintergrundfarbe: $gray-darker;
Farbe: #fff;
h1, h2, h3, h4, h5, .widget-eventTime, .widget-timeline-title, h6, .h1, .h2, .h3, .h4, .h5, .h6{

Farbe: #fff;

}
//Fügen Sie hier weitere Stile hinzu… 

}

Stück für Stück werde ich Hintergrundfarben, Rahmen und Schriftfarben ändern, bis ich an einem Punkt angelangt bin, an dem ich mit dem Gesamteindruck zufrieden bin. So etwas in der Art …

Sobald Sie ein Design haben, mit dem Sie zufrieden sind, müssen wir es umschaltbar machen, damit ein Kunde wählen kann, ob er es verwenden möchte oder nicht. Für diese Demonstration werden wir es als Umschalter erstellen, der für diese Sitzung gilt, aber es könnte leicht zu einer dauerhaften Einstellung gemacht werden, die mit dem Konto eines Kunden verknüpft ist. Dazu müssen Sie Ihrer SASS-Datei ein zusätzliches Bit hinzufügen.

Fügen Sie dem „HTML-Textkörper“ den Stil „.darkmode“ hinzu. Das bedeutet, dass Ihr neues Erscheinungsbild immer dann angewendet wird, wenn die Klasse „darkmode“ zum Textkörper hinzugefügt wird.

Als Nächstes fügen wir eine Entität hinzu, um zu verfolgen, ob der Dunkelmodus ein- oder ausgeschaltet ist. Für diese Demonstration machen wir sie nicht persistent und verknüpfen sie mit der Sitzung des Kunden. Anschließend richten wir die Sicherheit für die Zuordnung auf „schreibgeschützt“ und für das Flag „Aktiviert“ auf „Lesen/Schreiben“ ein.

Danach geben wir dem Kunden die Möglichkeit, es ein- und auszuschalten. Wir nehmen ein paar Symbole und fügen sie einer neuen Bildsammlung hinzu, eines für den hellen Modus und eines für den dunklen Modus.

Dann erstellen wir ein Snippet, das ein Switch-Steuerelement zum Umschalten dieses Booleschen Werts enthält. Es muss die DarkMode-Entität verwenden, die wir zuvor erstellt haben. Zuerst das Snippet, das ungefähr so ​​aussehen sollte …

Die zusätzlichen Spalten am Ende helfen, es zentral zu halten, wenn es in einen großen Bereich eingefügt wird, und Sie werden feststellen, dass die Datenquelle kein Kontexteintrag im Snippet ist, sondern eine DataView. Das liegt daran, dass wir es in die Layoutvorlage einfügen, damit der Switch auf jeder Seite verfügbar ist. Wenn ein Snippet in einer Layoutvorlage verwendet wird, muss es seine eigene Datenquelle laden, und in diesem Fall tun wir das mit einer DataView und einem Microflow.

Die Microflow-Datenquelle ist DS_DarkMode und sollte entweder die mit der aktuellen Sitzung verknüpfte DarkMode-Entität zurückgeben oder, falls noch keine vorhanden ist, eine neue, die mit der aktuellen Sitzung verknüpft ist. Das sollte so aussehen …

Als letztes muss im Snippet dem Switch ein OnChange-Ereignis zugewiesen werden. Dieses Ereignis sollte einen Nanoflow auslösen. Ich habe den Nanoflow OCh_DarkModeToggle genannt und alles, was Nanoflow tut, ist, eine JavaScript-Aktion aufzurufen. Diese Aktion fügt beim Aufruf die Klasse „Darkmode“ zum Body hinzu oder entfernt sie. Dies könnte einfach mit der Umschaltmethode der JavaScript-Klasse erfolgen, aber ich habe mich entschieden, es expliziter zu machen, damit es absolut verwendet werden kann.

Zuerst habe ich die Aktion mit dem Parameter IsEnabled erstellt und dann diese Funktion hinzugefügt:

exportiere asynchrone Funktion JS_DarkMode(isEnabled) {

// BEGINNEN SIE DEN BENUTZERCODE 

wenn(istAktiviert){

document.body.classList.add(„Dunkelmodus“);

Else {}

document.body.classList.remove(„Dunkelmodus“);

}

// ENDBENUTZERCODE 

}

 Der letzte Schritt besteht darin, Ihr Snippet in Ihre Layoutvorlage einzufügen, und schon kann es losgehen!

Sobald es veröffentlicht ist, finden Sie in Ihrer Kopfzeile ein Umschaltsteuerelement. Wenn Sie darauf klicken, sollte der Dunkelmodus angewendet bzw. entfernt werden. Wenn Sie noch einen Schritt weiter gehen möchten, können Sie sogar erkennen, auf welches Desktopdesign der Kunde eingestellt ist, und anhand dessen entscheiden, ob der Dunkelmodus angewendet werden soll oder nicht.

wenn (window.matchMedia && window.matchMedia('(bevorzugtes Farbschema: dunkel)').matches) {
document.body.classList.add(„Dunkelmodus“);
}

Ich hoffe, dies hat Ihnen bei der Implementierung des Dunkelmodus geholfen! Wenn ja, nehmen Sie Kontakt mit uns auf und senden Sie uns einige Screenshots oder Links – wir würden gerne sehen, wie es bei Ihnen funktioniert!