为什么我的自定义 colors 在我的 Angular 材料主题中不起作用？

Question

I trying to add more color to my angular material theme, I've added the success color in my style.scss by the map.deep-merge fucntion

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as material;
@use "sass:map";

@include material.core();

$custom-primary: material.define-palette(material.$light-blue-palette);
$custom-accent: material.define-palette(material.$blue-palette, A200, A100, A400);
$custom-warn: material.define-palette(material.$red-palette);
// extra Colors
$custom-success: material.define-palette(material.$green-palette);
$custom-danger: material.define-palette(material.$orange-palette);



$custom-theme: material.define-light-theme((
  color: (
    primary: $custom-primary,
    accent: $custom-accent,
    warn: $custom-warn,
  )
));


$custom-theme: map.deep-merge(
  $custom-theme,(
    success: $custom-success,
    danger: $custom-danger,
    color:(
      success: $custom-success,
      danger: $custom-danger
    )
  )
    );

@include material.all-component-themes($custom-theme);

Everything compiles correctly but when I try to apply the color to a button It looks like this

and don't have any idea why.

<button mat-raised-button color="success">Success</button>
<button mat-raised-button color="danger">Danger</button>

Curremtly I'm using "@angular/material": "^13.2.4",

Answer 1

I think only one step was missing: Adding .mat-success and .mat-danger CSS classes:

.mat-success {
  background-color: material.get-color-from-palette($custom-success, 500);
  color: material.get-color-from-palette($custom-success, 500-contrast);
}

.mat-danger {
  background-color: material.get-color-from-palette($custom-danger, 500);
  color: material.get-color-from-palette($custom-danger, 500-contrast);
}

I also removed the map.deep-merge , which was not necessary in this solution.

---

Complete theme.scss file:

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use "@angular/material" as material;

@include material.core();

$app-primary: material.define-palette(material.$purple-palette);
$app-accent: material.define-palette(material.$teal-palette, A200);
$app-warn: material.define-palette(material.$red-palette);
// extra Colors
$custom-success: material.define-palette(material.$green-palette);
$custom-danger: material.define-palette(material.$orange-palette);

$custom-theme: material.define-light-theme(
  (
    color: (
      primary: $app-primary,
      accent: $app-accent,
      warn: $app-warn,
    ),
  )
);

@include material.all-component-themes($custom-theme);

.mat-success {
  background-color: material.get-color-from-palette($custom-success, 500);
  color: material.get-color-from-palette($custom-success, 500-contrast);
}

.mat-danger {
  background-color: material.get-color-from-palette($custom-danger, 500);
  color: material.get-color-from-palette($custom-danger, 500-contrast);
}

Github Demo Link (unfortunately Stacklitz has problems with the custom theme)

Answer 2

if you used angular-CLI while building the project:

as per the official docs -

If you are using the Angular CLI, support for compiling Sass to CSS is built-in; you only have to add a new entry to the "styles" list in angular-cli.json pointing to the theme file (eg, custom-theme.scss).

So make sure your theme is included in your angular.json and the necessary imports exist in the app.module.ts , and now you can import your theme in every file like this: @import YOUR_FILE_NAME After editing the angular.json file, you will need to run ng-serve again.

---

if you are not using angular-CLI:

as per the official docs -

If you are not using the Angular CLI, you can include a prebuilt theme via a element in your index.html.

so first make sure that all the imports are correct

---

if neither helped:

add another import in each of the component files where mat* components are used

import { MatButtonModule } from "@angular/material/button";

Remember that when you add that import, your IDE will tell you (by greying it out) that it's not needed and can be removed.

---

if even that didn't help

As per latest angular material documentation you have to import modules from its respective package instead of @angular/material/

So change from:

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

to:

 import { MatToolbarModule } from '@angular/material/toolbar'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon';

---

last resort

try building a minimal reproduction of an app using the same theme you built and post it here or try debuging it yourself (you'll be surprised by how much it can help)

---

and in any case after each change, if nothing happens, run ng-serve