GEDOPLAN
Webprogrammierung

Angular Material Theming

Webprogrammierung
bumper cars 4390958 640
bumper cars 4390958 640

Angular als Framework für die Entwicklung von anspruchsvollen Webanwendungen bringt alles mit was der Entwickler braucht. Alles? Nicht ganz. Ähnlich wie bei JSF werden wir in aller Regel zusätzliche ( optische ) Fremd-Komponenten integrieren. Neben PrimenNG (Primetek, Primefaces) kommt aus der Feder von Google selbst @angular/material . Basierend auf Googles Material Design erhalten wir eine ganze Reihe von Komponenten vom Button bis zur Datatable. Doch was wenn uns diese optisch nicht so ganz zusagen und wir eigene Farb- und Schrift-Gestaltungen einbringen wollen?

Schauen wir zuerst einmal wie Angular Material sich integrieren lässt. Dazu eilt uns, wie so oft, die Angular-CLI zur Hilfe, die uns fast die gesamte Arbeit abnimmt:

ng add @angular/material

Damit werden die benötigten Abhängigkeiten installiert und unser Basis-Style Datei ergänzt. Bei der Installation wählen wir unter anderem das Theme welches wir verwenden wollen. Hier sehen wir bereits das Google mit einigen Standard-Themes um die Ecke kommt, für die wir nichts mehr tun müssen. Alternativ wählen wir “custom” um unser eigenes Theme zu definieren ( kann später auch problemlos ergänzt und geändert werden ).

Die Grundidee bei der Farbgestaltung von Googles Material basiert auf 3 Farben:

  • primary, Hauptfarbe
  • accent, Zweitfarbe
  • warn, Farbe für Fehler
import { MatButtonModule, MatBadgeModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
@NgModule({
...
  imports: [... MatButtonModule,MatBadgeModule]
})
export class AppModule {}
<button mat-raised-button color="primary" matBadge="8" matBadgePosition="after" matBadgeColor="accent">
  primary-accent
</button>
2019 12 17 13 46 47 ngmaterialstheme

Anpassungen an diesen Farbwerten erfolgen nun über eine SCSS Datei. ( selbst dann wenn das Projekt selbst CSS als Styling-Variante verwendet, dann über die zusätzlich generierte Datei custom-theme.scss). Die Einbindung eines eigenen Theme erfolgt in 3 Schritten.

Farben

Alle diese Farben sind aber nicht einfache Farbwerte sondern sogenannte Farb-Paletten die sich zum einen dadurch auszeichnen das auch hellere und dunklere Farbe werte definiert sind, sondern auch Kontrast Farben ( z.B. der Text auf farbige Komponenten )

Eine Farbpalette definiert einen Farbraum der für einen der 3 Bereiche verwendet werden kann, die Definition erfolgt als SCSS Map mit den Abstufungen der Farbwerte, Farbvarianten für abgesetzte Texte ( A100, A200, A400, A700) und den Kontrast-Werten:

$palette01: (
  50: #ebf0f4,
  100: #ccd9e3,
  200: #aac0d0,
  300: #88a6bd,
  400: #6f93ae,
  500: #5580a0,
  600: #4e7898,
  700: #446d8e,
  800: #3b6384,
  900: #2a5073,
  A100: #b9dcff,
  A200: #86c3ff,
  A400: #53a9ff,
  A700: #3a9cff,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #000000,
    400: #000000,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000
  )
);

Tipp: eine ganze nette Seite um solche Definitionen zu generierten ist: http://mcg.mbitson.com/

Farbpaletten

Über Mixin-Funktionen die Angular uns zur Verfügung stellt, können wir nun entsprechende Paletten generierten und diese registrieren

@import '~@angular/material/theming';
@include mat-core();


$theme02-primary: mat-palette($palette01);
$theme02-accent: mat-palette($palette02);
$theme02-warn: mat-palette($palette03);

$theme02: mat-light-theme($theme02-primary, $theme02-accent, $theme02-warn);
@include angular-material-theme($theme02);

Die Methode mat-palette hat optional 3 zusätzliche Parameter um aus der übergebenen Palette (über den Key, z.B. 200 ) die Default-Werte für primary,lighter,darker zu selektieren. Neben der oben verwendeten Funktion mat-light-theme existiert auch mat-dark-theme, um ein dunkles Layout zu erzeugen.

Neben der Übernahme des Themes für alle Komponenten wie oben zu sehen existiert auch die Möglichkeit Themes für einzelne Material-Komponenten zu definieren:

@include mat-badge-theme($theme03);
2019 12 17 14 09 24 prc3a4sentation1 powerpoint

Komponenten

Bei der Verwendung der Material-Komponenten können wir die Farben nun durch entsprechende Attribute definieren wie bereits oben zu sehen. Wollen wir in unseren eigenen Komponenten auf die Farben der Paletten zugreifen erlauben uns entsprechende Mixin-Funktionen die zu tun

Dazu bietet es sich an folgende Trennung vorzunehmen:

  • theme.scss
    • Defitinion von Farben
    • Definition von Paletten
    • Definition von Theme
  • style.scss ( root – Style )
    • import der theme.css
    • Registrierung als Theme

style.scss

@import 'styles_theme.scss';
@include mat-core();
@include angular-material-theme($theme02);

component.scss

@import '../styles_theme.scss';

:host {
  background-color: mat-color($theme02-primary);
}

Tipp: durch folgenden Eintrag in der angular.json unter architect/build/options können wir die relative Angabe der Theme-SCSS durch eine absolute Variante ersetzen ( @import ‘styles_theme.scss’ )

            "styles": ...
            "stylePreprocessorOptions": {
              "includePaths": ["src/theme"]
            },
            "scripts": ...

That’s it. Zugegeben “einfach ein paar CSS-Klassen überschreiben” mag auf den ersten Blick einfacher erscheinen als hier ein eigenes Theme zu erstellen und vor allem mittels der Funktionen zu registrieren. Aber auf diesem Wege haben wir ein valides Layout welches in allen Kombinationen auch gut lesbar ist.

Github….

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Bitte füllen Sie dieses Feld aus.
Bitte füllen Sie dieses Feld aus.
Bitte gib eine gültige E-Mail-Adresse ein.
Sie müssen den Bedingungen zustimmen, um fortzufahren.

Autor

Diesen Artikel teilen

LinkedIn
Xing

Gibt es noch Fragen?

Fragen beantworten wir sehr gerne! Schreibe uns einfach per Kontaktformular.

Kurse

weitere Blogbeiträge

IT-Training - GEDOPLAN
Jakarta EE (Java EE)

JPA mit dynamischer DB-Verbindung

In Java-EE-Anwendungen, die JPA zum DB-Zugriff nutzen, wird im Normalfall eine Datasource zur Spezifikation der Datenbankverbindung genutzt: &lt;persistence ...&gt; &lt;persistence-unit…

Work Life Balance. Jobs bei Gedoplan

We are looking for you!

Lust bei GEDOPLAN mitzuarbeiten? Wir suchen immer Verstärkung – egal ob Entwickler, Dozent, Trainerberater oder für unser IT-Marketing! Schau doch einfach mal auf unsere Jobseiten! Wir freuen uns auf Dich!

Work Life Balance. Jobs bei Gedoplan

We are looking for you!

Lust bei GEDOPLAN mitzuarbeiten? Wir suchen immer Verstärkung – egal ob Entwickler, Dozent, Trainerberater oder für unser IT-Marketing! Schau doch einfach mal auf unsere Jobseiten! Wir freuen uns auf Dich!