Wie kann ich benutzerdefinierte Themenpaletten in Angular verwenden?

Ich möchte die Markenfarben meines Unternehmens in der gesamten App verwenden.

Ich habe dieses Problem gefunden: AngularJS 2 - Materialdesign - Farbpalette festlegen, in der ich ein angeblich benutzerdefiniertes Thema erstellen kann , aber im Grunde genommen werden nur verschiedene Teile vorgefertigter Paletten verwendet. Ich möchte die vordefinierten Farben von Material2 nicht verwenden. Ich möchte meine einzigartigen und besonderen Markenfarben. Gibt es eine bessere Möglichkeit (besser?), Mein eigenes Thema zu erstellen, als nur herumzuhacken _palette.scss?

Muss ich ein Mixin für meine Markenpalette erstellen? Wenn ja - irgendwelche Anleitungen, wie man es richtig macht? Was bedeuten die verschiedenen Farbtöne (gekennzeichnet mit Zahlen wie: 50, 100, 200, A100, A200 ...)?

Alle Informationen über diesen Bereich werden sehr geschätzt!

Nach einigen Recherchen kam ich zu diesem Schluss, der es für mich gelöst hat. Ich hoffe, es wird auch Ihnen helfen.

Schritt 1: Erstellen Sie Ihre eigenen Paletten aus Markenfarben.

Wir haben diese fantastische Website gefunden, auf der Sie Ihre Markenfarbe eingeben, und sie erstellt eine vollständige Palette mit den verschiedenen Schattierungen dieser Markenfarbe: http://mcg.mbitson.com

Ich habe dieses Tool sowohl für meine primaryFarbe (die meine Markenfarbe ist) als auch für die accentFarbe verwendet.

Schritt 2: Erstellen Sie Paletten in Ihrer benutzerdefinierten Designdatei

Hier ist eine Anleitung zum Erstellen einer solchen .scssDatei: https://github.com/angular/material2/blob/master/guides/theming.md

@import '~@angular/material/theming';

// Be sure that you only ever include 'mat-core' mixin once!
// it should not be included for each theme.
@include mat-core(); 

// define a real custom palette (using http://mcg.mbitson.com)
$bv-brand: (
    50: #ffffff,
    100: #dde6f3,
    200: #b4c9e4,
    300: #7fa3d1,
    400: #6992c9,
    500: #5282c1,
    600: #4072b4,
    700: #38649d,
    800: #305687,
    900: #284770,
    A100: #ffffff,
    A200: #dde6f3,
    A400: #6992c9,
    A700: #38649d,
    contrast: (
        50: $black-87-opacity,
        100: $black-87-opacity,
        200: $black-87-opacity,
        300: $black-87-opacity,
        400: $black-87-opacity,
        500: white,
        600: white,
        700: white,
        800: white,
        900: white,
        A100: $black-87-opacity,
        A200: $black-87-opacity,
        A400: $black-87-opacity,
        A700: white,
    )
);

$bv-orange: (
    50: #ffffff,
    100: #fff7f4,
    200: #fecdbd,
    300: #fc9977,
    400: #fc8259,
    500: #fb6c3b,
    600: #fa551d,
    700: #f44205,
    800: #d63a04,
    900: #b83204,
    A100: #ffffff,
    A200: #fff7f4,
    A400: #fc8259,
    A700: #f44205,
    contrast: (
        50: $black-87-opacity,
        100: $black-87-opacity,
        200: $black-87-opacity,
        300: $black-87-opacity,
        400: $black-87-opacity,
        500: white,
        600: white,
        700: white,
        800: white,
        900: white,
        A100: $black-87-opacity,
        A200: $black-87-opacity,
        A400: $black-87-opacity,
        A700: white,
    )
);

// mandatory stuff for theming
$bv-palette-primary: mat-palette($bv-brand);
$bv-palette-accent:  mat-palette($bv-orange);

// include the custom theme components into a theme object
$bv-theme: mat-light-theme($bv-palette-primary, $bv-palette-accent);

// include the custom theme object into the angular material theme
@include angular-material-theme($bv-theme);

Einige Erklärungen zum obigen Code

Die Zahlen auf der linken Seite legen die "Helligkeit" fest. Der Standardwert ist 500 (dies ist der wahre Farbton meiner Markenfarbe / Akzentfarbe). In diesem Beispiel ist meine Markenfarbe #5282c1. Der Rest sind andere Schattierungen dieser Farbe (wobei niedrigere Zahlen hellere Schattierungen und höhere Zahlen dunklere Schattierungen bedeuten). Das AXXXsind verschiedene Farben. Ich bin mir (noch) nicht sicher, wo sie verwendet werden. Wiederum bedeutet eine niedrigere Zahl heller und eine höhere Zahl dunkler.

Das contrastsetzt die Schriftfarbe über diese Hintergrundfarben. Es ist sehr schwierig (oder sogar unmöglich), über CSS zu berechnen, wo die Schrift hell (weiß) oder dunkel (schwarz mit einer Deckkraft von 0,87) sein sollte, sodass sie selbst für farbenblinde Menschen leicht lesbar ist. Dies wird also manuell eingestellt und in der Palettendefinition fest codiert. Sie erhalten dies auch vom oben verlinkten Palettengenerator (obwohl er im alten Material1-Format ausgegeben wird und Sie ihn manuell in das Material2-Format konvertieren müssen, wie ich es hier gepostet habe).

Stellen Sie das Thema so ein, dass die Markenfarbpalette als primaryFarbe und alles, was Sie als Akzent haben, als accentFarbe verwendet wird.

Schritt 3: Verwenden Sie das Thema in der gesamten App, wo immer Sie können

Einige Elemente können die Designfarben nehmen, wie <md-toolbar>, <md-input>, <md-button>, <md-select>und so weiter. Sie werden primarystandardmäßig verwendet. Stellen Sie daher sicher, dass Sie die Markenfarbpalette als primär festlegen. Wenn Sie die Farbe ändern möchten, verwenden Sie die colorDirektive (handelt es sich um eine Angular-Direktive?).

Beispielsweise:

<button mat-raised-button color="accent" type="submit">Login</button>