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",
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)