Wie kann man in 5 Minuten ein dunkles Theme zu seiner Mendix-App hinzufügen?

Ja, ich weiß, der Titel klingt ein bisschen zu schön, um wahr zu sein. Jede Webanwendung hat eine Menge benutzerdefiniertes Styling und Unternehmensbranding, das bei der Gestaltung eines dunklen Themes berücksichtigt werden muss. Normalerweise nimmt dieser Prozess sehr viel Zeit in Anspruch. Man muss die richtige Farbpalette auswählen und dann das CSS umgestalten, um zwei verschiedene Farbthemen zu unterstützen. Das hat zur Folge, dass fast das gesamte CSS umgeschrieben werden muss, denn ehrlich gesagt plant niemand wirklich für solche Szenarien im Voraus.

Wie lässt sich das alles in nur fünf Minuten bewerkstelligen? Ganz einfach, folgen Sie den Schritten:

1. Fügen Sie das Mendix Dark Theme Modul aus dem App Store in Ihre Mendix App ein
2. Fügen Sie einen Nanoflow-Button (oder drei) 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 durchgeführt. Sie können die Ergebnisse unter darkreader finden. Dies ist eine großartige Beispiel-Applikation für ein dunkles Thema, da sie alle Mendix-Komponenten enthält. Sie können leicht sehen, wie sie alle in einem dunklen Themenmodus aussehen.

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

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

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

Die Magie

Lassen Sie mich Ihnen die ganze Geschichte erzählen.

An einem schönen Wintertag suchte ich nach einer Möglichkeit, die Duolingo-Website augenfreundlicher zu gestalten (ich lerne Niederländisch, falls Sie sich das gefragt haben). In der Vergangenheit habe ich mehrere Erweiterungen für dunkle Themen für Chrome ausprobiert und meine Erfahrungen damit waren nicht besonders gut. Aber dieses Mal bin ich über eine Erweiterung gestolpert, die ganz gut funktioniert. Dann dachte ich daran, 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 noch besser für Mendix-Websites geeignet ist, die nicht so viele Animationen oder kompliziertes Styling haben.

Mein erster Gedanke war, diese Erweiterung mit allen zu teilen, aber ich bin mir bewusst, dass die meisten Webnutzer nicht von der Idee begeistert sind, eine Abhängigkeit von einer dritten Partei zu installieren, die Zugriff auf alle Inhalte ihrer Website hat. Glücklicherweise stellte sich nach einem genaueren Blick auf die Erweiterung heraus, dass sie vollständig quelloffen ist. Es wird sogar mit einer Javascript-API geliefert, so dass es von einer Website aus ohne die Chrome-Erweiterung verwendet werden kann.

Das Modul ist also nur ein Wrapper 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 der Unterstützung für dunkle Themen zu einer echten, in Produktion befindlichen Mendix-App basieren.

Tipps

• Beginnen Sie mit der Auswahl der primären Vorder- und Hintergrundfarben. Dark Reader macht Ihnen Vorschläge, aber es sieht wahrscheinlich besser aus, wenn Sie bestimmte Farben auswählen, die auf dem Branding Ihres Unternehmens basieren. Diese können in den Themenoptionen angepasst werden.
• Verwenden Sie die allgemeinen Einstellungen, um das Thema nach Ihren Wünschen zu gestalten. 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 die 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 Aufzählung Enum_Theme als 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. Spaß Tatsache, es unterstützt auch Nanoflows.
• Fügen Sie CSS-Überschreibungen sparsam ein. Wenn ein Element in einem dunklen Thema nicht gut aussieht, ist es einfach, ein dunkles Thema-CSS mit ! important einzufügen und es als erledigt zu betrachten. 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. aufwiesen. Wie sich herausstellte, stört dies den Dark Reader. In diesem Fall war es besser, das CSS zu überarbeiten und den Dark Reader sein Ding machen zu lassen. Ich denke, man kann die Unterstützung für dunkle Themen in die lange Liste der Gründe für die Vermeidung von Inline-Styles aufnehmen.
• Bei der Anwendung von CSS-Überschreibungen sollten Sie CSS-Variablen für Dark Reader verwenden. 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.

Leistung

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

• Bildanalyse ignorieren - gilt 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 erzeugt werden, die dazu neigen, viel Inline-Styling zu verwenden)

Eine andere, sehr 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 schon seit geraumer Zeit (z.B. seit Monaten) ziemlich stabil ist.

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

DarkReader.exportGeneratedCSS()

Sie können dann dieses CSS in index.html einfügen und es mit Javascript über das Attribut disabled umschalten.

// index.html, css ist standardmäßig deaktiviert
//

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

Schlussfolgerung

In diesem Blog-Beitrag haben wir uns angesehen, wie man einer Mendix-Applikation Unterstützung für dunkle Themes hinzufügen kann, ohne das CSS komplett überarbeiten und Tage in Design-Meetings verbringen zu müssen. Ich persönlich hoffe, dass immer mehr Mendix-Applikationen dunkle Themes unterstützen werden, insbesondere solche, die öffentlich verfügbar sind.

Bis dahin können Sie immer noch die Erweiterung verwenden: https://darkreader.org/

Wenn Sie das Modul oder die Erweiterung nützlich finden, sollten Sie darüber nachdenken, an https://darkreader.org/ zu spenden. Sie haben wirklich großartige Arbeit geleistet und verdienen unseren Respekt.