App-Design / Mobile CSS

Die Moodle App lässt sich in den Farben Ihrer Einrichtung darstellen. Dafür erwartet die App CSS-Variablen, deren Namen aus dem Ionic-Framework stammen und weder in Moodle noch in Boost Union eine Farbauswahl haben. Das Werkzeug App-Design / Mobile CSS schließt diese Lücke: Sie wählen Farben aus, es erzeugt den passenden CSS-Code. Eingetragen wird der Code anschließend im Design Boost Union.

Voraussetzung: Administrator/innen-Rechte (moodleadmin). Dazu das Design Boost Union und das Plugin local_mobilecssgenerator. Das Werkzeug selbst speichert nichts und ändert nichts an der Plattform, es gibt nur Text aus.

CSS erzeugen

1. Website-Administration öffnen und den Reiter Darstellung wählen.
2. Auf App-Design / Mobile CSS klicken.
3. In den vier Abschnitten auf das Farbfeld klicken und eine Farbe wählen. Alternativ den Hex-Wert im Format #rrggbb direkt in das Feld eintragen.
4. Nur die Felder ausfüllen, die Sie ändern wollen. Leere Felder erscheinen nicht im Code, dort behält die App ihre Standardfarbe.
5. Die Vorschau rechts prüfen und auf Kontrastwarnungen unterhalb des Bildschirms achten.
6. Auf CSS generieren klicken. Der fertige Code erscheint unten auf der Seite.
7. Auf In Zwischenablage kopieren klicken.

Die Schaltfläche Alle zurücksetzen leert sämtliche Farbfelder auf einen Schlag, ohne die Seite neu zu laden.

Die vier Farbbereiche

Vorschau und Kontrastwarnung

Rechts neben den Farbfeldern steht ein schematisches Handy-Bild, das sich bei jeder Farbänderung sofort mitfärbt. Es zeigt die Wirkung der Farben zueinander, nicht das genaue Aussehen der App: Abstände, Symbole und Schriftgrößen sind nachgebaut.

Unter dem Bild prüft das Werkzeug fünf Farbkombinationen gegen den WCAG-Wert 4,5:1 für Text. Toolbar-Text, aktive Tab-Textfarbe und aktive Icon-Farbe werden gegen ihren jeweiligen Hintergrund gerechnet, allgemeine Textfarbe und Linkfarbe gegen Weiß, weil der Inhaltsbereich der App weiß ist. Reicht der Kontrast nicht, erscheint eine Warnung mit dem tatsächlichen Verhältnis.

Achtung: Die Warnung hält niemanden auf. Der Code wird trotzdem erzeugt, und die Farben landen so in der App. Wer eine gemeldete Kombination stehen lässt, entscheidet sich gegen die Lesbarkeit auf kleinen Bildschirmen bei Sonnenlicht.

Was der Code enthält

Ausgegeben werden vier CSS-Blöcke, einer je Abschnitt. Jede Zeile trägt !important, weil die App ihre eigenen Regeln zuerst lädt und der eingesetzte Code sonst wirkungslos bliebe. Aus der Primärfarbe rechnet das Werkzeug fünf weitere Werte aus, die die App zusätzlich braucht:

:root {
    --ion-color-primary: #233264 !important;
    --ion-color-primary-rgb: 35,50,100 !important;
    --ion-color-primary-contrast: #ffffff !important;
    --ion-color-primary-contrast-rgb: 255,255,255 !important;
    --ion-color-primary-shade: #1f2c58 !important;
    --ion-color-primary-tint: #394774 !important;
    --ion-text-color: #1b1e24 !important;
    --core-link-color: #233264 !important;
}

Die Kontrastfarbe (Schwarz oder Weiß für Text auf der Primärfarbe) sowie die dunklere und die hellere Variante entstehen automatisch. Sie geben nur die eine Markenfarbe an.

Code in Boost Union eintragen

1. Website-Administration öffnen und den Reiter Darstellung wählen.
2. Auf Boost Union und dort auf Erscheinungsbild klicken.
3. Den Reiter Mobile öffnen.
4. Den kopierten Code in das Feld Zusätzliches CSS für mobile App einfügen.
5. Unten auf Änderungen speichern klicken.

Beim Speichern trägt Boost Union die Kerneinstellung mobilecssurl automatisch auf eine eigene Adresse um. Über diese Adresse holt sich die App den Code. Ändern Sie die Einstellung nicht von Hand, sonst erreicht das Design die App nicht mehr.

Hinweis: Angemeldete Geräte übernehmen die neuen Farben nicht sofort. Wenn die App noch das alte Design zeigt, melden Sie sich in der App ab und wieder an.

Wichtige Einstellungen

• Globale Farben: Primär-/Markenfarbe wirkt an den meisten Stellen der App. Allgemeine Textfarbe und Linkfarbe gelten im Inhaltsbereich und sollten zum weißen Untergrund passen.
• Kopfzeile: Toolbar-Hintergrund und Toolbar-Text / Icons gehören zusammen. Text und Symbole beziehen ihre Farbe aus demselben Feld, ein dunkler Hintergrund verlangt also einen hellen Wert.
• Obere Inhalts-Tabs: Neben Tab-Textfarbe (inaktiv) und (aktiv) gibt es zwei Hintergründe. Tab-Leisten-Hintergrund färbt die ganze Leiste, Einzelner Tab-Hintergrund die einzelnen Schaltflächen darin.
• Untere Navigationsleiste: Icon-/Beschriftungsfarbe (aktiv) markiert den geöffneten Bereich, Aktiv-Marker Farbe setzt zusätzlich einen farbigen Strich darüber. Beide dürfen sich unterscheiden.
• Leere Felder: Ein Feld ohne Wert wird übersprungen und steht nicht im Code. So lässt sich gezielt nur die Kopfzeile umfärben, ohne alles andere festzulegen.

Tipps

• Bewahren Sie den erzeugten Code auf, etwa in einer Textdatei. Das Werkzeug merkt sich die Farbwerte nicht: Nach dem Verlassen der Seite sind die Felder wieder leer, und für eine spätere Änderung tragen Sie alle Farben erneut ein. Aus dem gespeicherten Code lassen sich die Hex-Werte dagegen ablesen.
• Steht in Zusätzliches CSS für mobile App bereits eigener Code, ersetzen Sie ihn nicht blind. Fügen Sie den erzeugten Block darunter ein und prüfen Sie, ob beide dieselben Variablen setzen. Bei gleichem !important gewinnt die spätere Zeile.
• Prüfen Sie das Ergebnis auf einem echten Gerät. Die Vorschau zeigt fünf Elemente, die App zeigt Kurslisten, Formulare und Dateianhänge. Farben, die nebeneinander stimmen, können in einer langen Liste anders wirken.