**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| Abschnitt | Wirkung in der App |
|---|---|
| **Globale Farben** | Primär-/Markenfarbe, allgemeine Textfarbe und Linkfarbe. Die Primärfarbe erscheint an vielen Stellen, unter anderem auf Schaltflächen. |
| **Kopfzeile / Toolbar** | Die Leiste am oberen Rand jedes Bildschirms mit Titel, Suchsymbol und Profilbild. |
| **Obere Inhalts-Tabs** | Die Tab-Leiste innerhalb einer Seite, z. B. *Startseite* und *Dashboard*. |
| **Untere Navigationsleiste** | Die Hauptnavigation am unteren Bildschirmrand mit ihren Symbolen. |
**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.