In folgendem Artikel: Angular Material Theming haben wir uns bereits angesehen wie wir eigene Themes für Angular Material schreiben. Auch haben wir gesehen wie wir die so definierten Farb-Paletten und Typografie-Elemente in unseren eigenen Komponenten einsetzen können. Das war ganz einfach, durch eine kluge Trennung der Style-Definitionen und einen Import des aktuell verwendeten Themes. Doch was wenn unsere Komponenten nicht Teil unseres Projektes sind, sondern in einem separaten Projekt / eigenen Komponente-Bibliothek ausgelagert sind? Hier haben wir ja keinen direkten Zugriff auf das aktuelle Theme, schließlich wird das ja erst durch die konkrete Anwendung festgelegt.
Unsere eigene Komponenten Bibliothek muss also analog zum Vorgehen bei Angular Materials durch entsprechende Mixin-Funktionen mit dem aktuellen Theme versorgt werden. Um das zu tun bedarf es einiger Vorarbeit innerhalb unserer Komponenten.
Zusätzlich zu der üblichen Komponenten-Style-Datei implementieren wir eine theme.scss für unsere Bibliothek. Diese Datei enthält alle Regeln mit Theme-spezifischen Eigenschaften für die in der Bibliothek enthaltenden Komponenten. Um diese später in den konkreten Anwendungen zu definieren benötigen wir entsprechende Mixin-Funktionen:
@import '~@angular/material/theming';
@mixin ng-lib-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
lib-panel div.body {
border-top-color: mat-color($primary, 400);
border-bottom-color: mat-color($accent, 400);
}
}
@mixin ng-lib-typography($config) {
lib-panel div.body {
font-size: mat-font-size($config, title);
}
}
Wie zu sehen definieren wir jeweils eine eigene Mixin-Funktion für das Theme und Typografie die mit einem entsprechenden Parameter versorgt werden (Theme-Objekt bzw. Typografie-Konfig). Aus dem Theme können wir dann z.B. mittels „map-get“ die einzelnen Paletten extrahieren (primary, accent, warning) die dann wiederum dazu genutzt werden können um konkrete Farbwerte zu ermitteln. Diese werden dann wie bereits gesehen in einzelnen CSS-Regeln verwendet um Theme spezifische Ergänzungen zu den Komponente-Styles zu liefern.
Innerhalb er konkreten Anwendung ähnelt die Registrierung dann erschreckend der von Angular Materials:
@include ng-lib-theme($theme02);
@include ng-lib-typography($custom-typography);
Zugegeben mit „ein bisschen“ CSS ist es hier nicht getan. Auch um die Verwendung von SASS als CSS-Präprozessor kommen wir an dieser Stelle nicht mehr herum. Der ist aber ohnehin zu empfehlen, auch wenn man im eigenen Projekt die Möglichkeiten von SASS vielleicht gar nicht ausschöpft oder sogar nur Kernfunktionen wie die Definition von Variablen nutzt. Ob die Anbindung der eigenen Komponenten an das Material Theming, wie zu letzt gesehen, notwenig ist hängt sicher von der Anwendung selbst ab. Insbesondere bei internen Komponenten-Bibliotheken die keinerlei dynamischen Theming-Funktionalitäten benötigen erfüllt eine zentrale Library mit festgelegtem Look&Feel ( in unserem Beispiel wäre das die theme.scss und variables.scss) sicherlich auch seinen Zweck.
