CODEWITHSUNDEEP
cssangularsassangular-materialangular-material-theming
geraktOfRivia
geraktOfRivia

Reputation: 345

Why My custom colors are not working in my Angular material theme?

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 enter image description here

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

Upvotes: 4

Views: 10450

Answers (2)

ChrisY
ChrisY

Reputation: 1783

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)

Upvotes: 6

Guy Nachshon
Guy Nachshon

Reputation: 2645

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 (e.g., 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 , MatButtonModule, MatIconModule} from '@angular/material';

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

Upvotes: 2

Related Questions