Wie Sie Ihrer Mendix App in 5 Minuten ein Dark Theme hinzufügen?

Ja, ich weiß, der Titel scheint ein bisschen zu schön, um wahr zu sein. Jede Web-App hat eine Menge an benutzerdefiniertem Styling und Firmen-Branding, das bei der Gestaltung eines dunklen Themes berücksichtigt werden muss. Normalerweise nimmt dieser Prozess eine Menge Zeit in Anspruch. Man muss die richtige Farbpalette auswählen und dann das CSS so refaktorisieren, dass zwei verschiedene Farbthemen unterstützt werden. Das hat zur Folge, dass fast das gesamte CSS neu geschrieben werden muss, denn ehrlich gesagt plant niemand wirklich für solche Szenarien im Voraus.

Wie kann das alles in nur fünf Minuten erledigt werden? Ganz einfach, indem Sie folgenden vier Schritten folgen:

1. Fügen Sie das Mendix Dark Theme-Modul aus dem App-Store zu Ihrer Mendix-App hinzu.
2. Fügen Sie eine Nanoflow-Schaltfläche in ein Layout, eine Navigation oder eine Seite Ihrer Wahl ein
3. Rufen Sie aus dem Nanoflow die Java-Script-Aktion JSA_ApplyTheme auf
4. Starten Sie Ihre App und sehen Sie sich das Ergebnis an.

Ich habe diese Schritte für die App-Store-App "Atlas UI Resources" durchlaufen. Die Ergebnisse finden Sie unter darkreader. Dies ist eine großartige Beispiel-App für ein Dark Theme, da sie alle Mendix-Komponenten enthält. 

Ich hoffe, Sie finden dieses Modul nützlich und es hilft Ihnen, bessere Mendix-Apps zu erstellen.

"Moment, Moment... Sie fragen sich bestimmt, wie dieses Modul eigentlich funktioniert. Die Antwort ist einfach: Magie"

Hmm. Es scheint, als ob Sie es wirklich wissen wollen. Ok, haltet euch fest, das könnte technisch werden.

Der Zauber

Lassen Sie mich Ihnen die ganze Geschichte erzählen.
An einem schönen Wintertag suchte ich nach einer Möglichkeit, die Duolingo-Website anschaulicher zu gestalten (ich lerne Niederländisch, falls Sie sich das gefragt haben). In der Vergangenheit habe ich mehrere Dark-Theme-Erweiterungen für Chrome ausprobiert und meine Erfahrungen damit waren nicht besonders gut. Aber dieses Mal bin ich über eine Erweiterung gestolpert, die ziemlich gut funktioniert hat. Dann dachte ich, wie sehr ich jeden Tag von all den hellen Mendix-Webseiten wie sprintr, appstore und dem Forum gequält werde. Es stellte sich heraus, dass die Erweiterung sogar besser für Mendix-Websites geeignet war, die nicht eine Tonne Animationen oder kompliziertes Styling haben.

Meine erste Idee war es, diese Erweiterung mit allen zu teilen, aber ich bin mir bewusst, dass die meisten Webnutzer nicht begeistert sind von der Idee, eine Abhängigkeit von einem Drittanbieter zu installieren, der Zugriff auf alle Inhalte ihrer Website hat. Glücklicherweise stellte sich nach einem genaueren Blick auf die Erweiterung heraus, dass sie komplett quelloffen ist. Sie kommt sogar mit einer Javascript-API, so dass sie von einer Website ohne die Chrome-Erweiterung verwendet werden kann.

Das Modul ist also nur eine Hülle um diese Open-Source-Bibliothek - Darkreader. Es war also doch keine Magie 😢.

Auch wenn Darkreader ziemlich gut funktioniert, gibt es vielleicht einige Widgets oder Seiten, die optimiert werden müssen, um noch besser auszusehen. Hier sind eine Handvoll Tipps, die auf meiner Erfahrung mit dem Hinzufügen von Dark Theme-Modulen zu einer echten, in Produktion befindlichen Mendix-App basieren.

Tipps

• Beginnen Sie mit der Auswahl der primären Vorder- und Hintergrundfarben. Dark Reader wird Ihnen Vorschläge unterbreiten, aber wenn Sie bestimmte Farben auf der Grundlage des Firmen-Brandings auswählen, sieht das wahrscheinlich viel besser aus. Diese können in den Theme-Optionen angepasst werden.
• Verwenden Sie die allgemeinen Einstellungen, um das Theme nach Ihren Wünschen zu optimieren. Meiner persönlichen Meinung nach dimmt die Einstellung der Graustufen auf 0,25 die meisten der sehr kräftigen Farben, zu denen Mendix neigt, auf ein akzeptables Niveau, ohne zu viel zu opfern.
• Invertieren Sie übermäßig dunkle oder helle Bilder. Dies kann durch Angabe eines css-Selektors für das Bild und dessen Übergabe im dynamischen Theme-Fix geschehen. Beispiele finden Sie auf github. Alternativ können einige JPGs und PNGs durch Glyphicons, Fontawesome oder andere Technologien ersetzt werden, die Farbwechsel unterstützen. Das ist wahrscheinlich ein weiterer Grund, Icon-Fonts gegenüber PNGs  zu bevorzugen.
• Es ist eine gute Idee, die Benutzereinstellungen im Account-Objekt zu speichern. Sie können die Enum_Theme-Aufzählung als einen Attributtyp verwenden. Wenn Sie nach Möglichkeiten suchen, die Javascript-Aktion beim Laden auszuführen, ohne dass der Benutzer auf eine Schaltfläche klicken muss, sollten Sie das Microflow-Timer-Widget in Betracht ziehen. Fun-Fact: Das Widget unterstützt auch Nanoflows.
• Fügen Sie CSS-Überschreibungen sparsam ein. Wenn ein Element in einem dunklen Theme nicht gut aussieht, ist es einfach, ein dunkles Theme-CSS mit !important hineinzuwerfen und die Sache zu erledigen. Aber nachdem ich einige beanstandete Elemente genauer unter die Lupe genommen hatte, stellte ich fest, dass sie oft schlechte CSS-Praktiken wie hart kodierte Inline-Hintergrundfarben usw. hatten. Wie sich herausstellte, stört dies den Dark Reader. In diesem Fall war es besser, das CSS zu refaktorisieren und den Dark Reader sein Ding machen zu lassen. Ich denke, Sie können die Unterstützung für Dark Themes zur langen Liste der Gründe hinzufügen, Inline-Stile zu vermeiden.
• Verwenden Sie bei der Anwendung von CSS-Überschreibungen die CSS-Variablen von Dark Reader. Dies wird es in Zukunft viel einfacher machen, die Hintergrund- und Vordergrundfarbe zu wechseln. Eine Liste der verfügbaren CSS-Variablen: darkreader-neutral-background, darkreader-neutral-text, darkreader-selection-background, darkreader-selection-text.

Performance

Der Dark-Reader arbeitet, indem er Ihre Website ständig scannt und entsprechende CSS-Regeln für dunkle Themes generiert. Dies kann den Client verlangsamen, besonders wenn es viele dynamische Inhalte wie Animationen und Diagramme gibt. Es gibt eigentlich zwei Möglichkeiten, Dark Reader anzuweisen, solche Inhalte nicht zu scannen:

• Bildanalyse ignorieren - ist speziell für Hintergrundbilder
• Inline-Stil ignorieren - scannt nicht den Inline-Stil (hart kodiert) von Elementen (dies ist speziell für Elemente, die von Diagrammbibliotheken generiert werden, die dazu neigen, viel Inline-Styling zu verwenden

Eine andere, viel extremere Option ist es, Javascript komplett wegzulassen und sich nur auf das generierte CSS zu verlassen. Ich würde dies nur empfehlen, wenn Sie sicher sind, dass sich Ihre Website in der Zukunft nicht viel ändern wird, d. h. wenn die Benutzeroberfläche für einige Zeit (denken Sie an Monate) ziemlich stabil war.

Wenn dies bei Ihrer App der Fall ist, dann können Sie das Javascript lokal ausführen und das generierte CSS exportieren.

DarkReader.exportGeneratedCSS()

Dieses CSS können Sie dann in index.html  einfügen und mit Javascript über das Attribut disabled ein- und ausschalten.

// index.html, css is disabled by default
// <link id="darkreader" href="darkreader-generated.css" disabled="disabled"/>

// javascript snippet
var el = document.getElementById('darkreader');
var osPreferenceIsDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if ( theme == "Dark" ||
(theme == "System" && osPreferenceIsDark ) ) {
el.removeAttribute("disabled");
} else {
el.setAttribute("disabled", "disabled");
}

Fazit

In diesem Blog-Beitrag haben wir uns angesehen, wie man einer Mendix-App den Dark-Themes-Support hinzufügt, ohne dass man das CSS komplett refaktorisieren und Tage in Design-Meetings verbringen muss. Meine persönliche Hoffnung ist, dass wir mehr und mehr Mendix-Apps sehen werden, die Dark Theme unterstützen, insbesondere solche, die öffentlich verfügbar sind.

Bis dahin, denken Sie daran, dass Sie immer diese Erweiterung verwenden können: https://darkreader.org/ 

Wenn Sie das Modul oder die Erweiterung nützlich finden, ziehen Sie eine Spende an https://darkreader.org/ in Erwägung. Sie haben wirklich großartige Arbeit geleistet und verdienen unseren Respekt.