Ausgangssituation

Sie haben bereits die Farben in der Oberfläche der collaboration wie in Wie kann ich die Collaboration an mein Logo und Farben anpassen beschrieben angepasst und setzen eine eigene CSS Datei ein.

Ergänzend möchten Sie aber, das z.B. bei den Diagrammen, automatisch dazugehörige Farbtöne verwendet werden.

Lösung

Die collaboration verfügt über diverse Farbtabellen. Wenn Sie eine Farbe davon verwendet, passen sich andere Elemente an die Farbe an. Dies ist z.B. bei Diagrammen ein hilfreicher Effekt.

Umsetzung

In den Anmerkungen ist eine Textdatei mit den jeweiligen Farbcodes zu finden.

Als Beispiel hier der gekürzte Absatz für die Farbe rot:

/** Material: Red */
public Red: Color[] = [
{ Variant: '50', ColorHex: '#FFEBEE', WhiteColor: false },
{ Variant: '100', ColorHex: '#FFCDD2', WhiteColor: false },
{ Variant: '200', ColorHex: '#EF9A9A', WhiteColor: false },
...
];

Wenn Sie dem Diagramm per CSS die Farbe #FFCDD2 zuweisen, wird von der collaboration der Farbwert aus der Farbtabelle wiedererkannt und ebenfalls auf die anderen Farbtöne aus der Tabelle ( #FFEBEE und #EF9A9A) zurückgegriffen.

Anmerkungen

• Mehr Informationen zur Farbbestimmung: https://material.io/design/color/the-color-system.html

• Anbei die in der collaboration unterstützten hex-Farbcodes