web-dev-qa-db-fra.com

angular matériau changeant la couleur de police par défaut

j'utilise angular et un peu perdu au niveau des thèmes. J'utilise le thème Indigo-pink préconstruit qui est inclus dans mes styles.scss comme ci-dessous

@import "~@angular/material/prebuilt-themes/Indigo-pink.css";

Sur la base du document, j'ai créé un nouveau fichier appelé theme.scss et l'ai inclus dans le angular.json après styles.scss. Le theme.scss ressemble à ci-dessous

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

@include mat-core();

$sg-app-primary: mat-palette($mat-Indigo);
$sg-app-accent:  mat-palette($mat-pink, A200, A100, A400);

$sg-app-theme: mat-light-theme($sg-app-primary, $sg-app-accent);

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

Mon exigence J'ai juste besoin de changer la couleur de police par défaut en blanc plutôt en noir partout. Je n'ai pas besoin de changer quoi que ce soit d'autre. J'ai copié la palette principale et l'accent juste à partir de l'exemple. ressentant même qu'ils ne doivent pas être changés.

cssangularangular-materialangular-material-theming
5
Moblize IT

Je crois que ce message répond à votre question: https://stackoverflow.com/a/46157803/10730815 . Fondamentalement, vous devez créer une carte de premier plan personnalisée et la fusionner dans votre thème. La combinaison de votre extrait de code et de ceux dans le post ci-dessus donne quelque chose comme ceci pour vos styles.scss:

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

@include mat-core();

$sg-app-primary: mat-palette($mat-Indigo);
$sg-app-accent:  mat-palette($mat-pink, A200, A100, A400);

$sg-app-theme: mat-light-theme($sg-app-primary, $sg-app-accent);

@function my-mat-light-theme-foreground($color) {
    @return (
        base:              $color,
        divider:           $white-12-opacity,
        dividers:          $white-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),
        slider-min:        rgba($color, 0.38)
    );
};

$white-foreground: my-mat-light-theme-foreground(white);
$my-app-theme-custom: map-merge($sg-app-theme, (foreground: $white-foreground));

@include angular-material-theme($my-app-theme-custom);

/* For the non-Angular Material items */
body {
    color: white;
}
1
codequiet