So ändern Sie die Schriftfarbe von primär-palette in Eckigen Material2?

In der offiziellen Thematisierung Dokumentation Winkel-Material2 es besagt eindeutig Folgendes:

In Eckig Material, ein Thema wird erstellt, durch das zusammensetzen von mehreren Paletten. Insbesondere ein theme besteht aus:

  • Eine primäre palette: Farben am meisten verbreitet über alle Bildschirme und Komponenten.
  • Einen Akzent palette: Farben für die floating-action-button und interaktive Elemente.
  • Ein warn-palette: Farben verwendet, um zu vermitteln, Fehler-Zustand.
  • Eine Vordergrund-palette: Farben für text und Symbole.
  • Hintergrund-palette: Farben für element Hintergründen.

Aber in jedem Beispiel, das Sie ändern nur die ersten drei:

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

$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

@include angular-material-theme($candy-app-theme);

Also meine Frage ist: Wie kann ich ändern Sie die Vordergrund-palette, um die Farbe des Textes für die primäre oder die sekundäre palette?

Gibt es einige websites ( materialpalette.com , material.io), die zeigen die Farb-palette für die einfache Visualisierung aber immer noch, Sie sagen nicht, wie zu zählen oder zu ändern, die palette in Winkel-Material2.

InformationsquelleAutor CodeArtist | 2017-04-16
  1. 15

    Können Sie die Standardeinstellung ändern Thema Farbe, indem Sie Ihre eigenen Vorder-Karte und führen Sie Sie in das erstellte Thema, bevor Sie es. Hier ist, wie:

    1. Bauen das Thema Objekt wie gewohnt.

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

//Choose colors
$my-app-primary: mat-palette($mat-blue-grey);
$my-app-accent:  mat-palette($mat-light-green);
$my-app-warn:    mat-palette($mat-red);

//Build theme object (its practically a map object)
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

    2. Bauen Sie Ihre benutzerdefinierten Vordergrund-mit einer benutzerdefinierten Funktion Rückkehr Vordergrund anzeigen, wie definiert in @angular/material/_theming.scss -> $mat-light-theme-foreground Funktion.

      Sie können spielen mit der Karte und definieren Sie nur die Felder, die Sie wollen, und lassen Sie die andere als Standard.

      @function my-mat-light-theme-foreground($color) {
    @return (
        base:              $color,
        divider:           $black-12-opacity,
        dividers:          $black-12-opacity,
        disabled:          rgba($color, 0.38),
        disabled-button:   rgba($color, 0.38),
        disabled-text:     rgba($color, 0.38),
        hint-text:         rgba($color, 0.38),
        secondary-text:    rgba($color, 0.54),
        icon:              rgba($color, 0.54),
        icons:             rgba($color, 0.54),
        text:              rgba($color, 0.87),
        slider-off:        rgba($color, 0.26),
        slider-off-active: rgba($color, 0.38),
    );
};

//You can put any color here. I've chosen mat-color($my-app-primary, 700)
$my-foreground: my-mat-light-theme-foreground(mat-color($my-app-primary, 700));

    3. Verschmelzen die zuvor erstellte Thema nur mit der Vorder-Karte und initialisieren Sie Ihr benutzerdefiniertes Thema.

      Hinweis: Da alle Karten in SCSS unveränderlich sind die map-merge() gibt neue map-Instanz und NICHT ändern Sie die Karte in Platz - somit haben wir eine weitere variable $my-app-theme-custom zu halten, das Ergebnis Thema.

      $my-app-theme-custom: map-merge($my-app-theme, (foreground: $my-foreground));

//Include your custom theme.
@include angular-material-theme($my-app-theme-custom);

    Hinweis: ich bin mit Eckig Material v2.0.0-beta.8

    • Nur für den Fall, jemand bekommt den Fehler Argument $Farbe` von opacity($color) muss eine Farbe` - Die oben my-mat-light-theme-foreground($color) Funktion fehlt die Eigenschaft für slider-min
    • Mit welcher version arbeitest du mit?
    • Winkel 5, Material 5
    • Danke! Ich habe das Argument $Farbe Fehler, die ich verwendet, Eckige 6.
    • Sie haben Hinzugefügt slider-min im Vordergrund anzeigen.
    InformationsquelleAutor nyxz
  2. 3

    Der guide ist verfügbar auf der Dokumentations-Webseite hier.

    Zuerst definieren Sie die Paletten, die für Ihr Thema, wie $primary, $accent, $warn (in der Anleitung haben Sie $candy-app- Präfix) und erstellen Sie dann eine $theme Objekt:

    //Create the theme object (a Sass map containing all of the palettes).
$theme: mat-light-theme($primary, $accent, $warn);

    Haben wir einmal ein Thema, das enthält alle Paletten, die wir bekommen können eine Vordergrund-palette aus: 

    $foreground: map-get($theme, foreground);

    Vom $foreground - palette, die wir bekommen können alle Werte, basierend auf einem Schlüssel, wie 

    secondary-text: rgba(black, 0.54),

    oder 

    text: rgba(black, 0.87)

    Hier ist der code zum abrufen der secondary-text Eigenschaft:

    color: mat-color($foreground, secondary-text);

    Wechselte ich zu 2.0.0-beta.3 aus 2.0.0-beta.2 und die Ordner-Struktur sieht anders aus, Sie haben Recht.
    Es ist jetzt \node_modules\@angular\material\_theming.scss, _palette.scssDatei Weg ist. Sie können tun, eine Globale Suche für die es aber: '$mat-dark-Thema-hintergrund: ('

    _theming.scss hat alle Farben, Karten und alle Funktionen, wie mat-color

    InformationsquelleAutor Wladimir
  3. 1

    Hier der code:

    //Foreground palette for light themes.
$mat-light-theme-foreground: (
  base:            black,
  divider:         rgba(black, 0.12),
  dividers:        rgba(black, 0.12),
  disabled:        rgba(black, 0.38),
  disabled-button: rgba(black, 0.38),
  disabled-text:   rgba(black, 0.38),
  hint-text:       rgba(black, 0.38),
  secondary-text:  rgba(black, 0.54),
  icon:            rgba(black, 0.54),
  icons:           rgba(black, 0.54),
  text:            rgba(black, 0.87)
);

    Können Sie finden die Karte unter: \node_modules\@Winkel\material\core\themes\
    _palette.scss

    Beispiel für das empfangen von "Sekundär-text':

    $foreground: map-get($theme, foreground);

.foreground-color {
  color: mat-color($foreground, secondary-text);
}
    • vielen Dank für Ihre Antwort, aber der Pfad, den Sie angeben kann ich nicht finden, es in mein Projekt, welche version von angular-material2 verwenden Sie? Und könnten Sie bitte erklären, die $theme, foreground und secondary-text in deinem Beispiel? Danke!
    InformationsquelleAutor Wladimir
Schreibe einen Kommentar