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!
Antworten:
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
primary
Farbe (die meine Markenfarbe ist) als auch für dieaccent
Farbe verwendet.Schritt 2: Erstellen Sie Paletten in Ihrer benutzerdefinierten Designdatei
Hier ist eine Anleitung zum Erstellen einer solchen
.scss
Datei: https://github.com/angular/material2/blob/master/guides/theming.mdEinige 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). DasAXXX
sind 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
contrast
setzt 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
primary
Farbe und alles, was Sie als Akzent haben, alsaccent
Farbe 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 werdenprimary
standardmäßig verwendet. Stellen Sie daher sicher, dass Sie die Markenfarbpalette als primär festlegen. Wenn Sie die Farbe ändern möchten, verwenden Sie diecolor
Direktive (handelt es sich um eine Angular-Direktive?).Beispielsweise:
<button mat-raised-button color="accent" type="submit">Login</button>
quelle
@import '~@angular/material/theming'; @include mat-core();