CODEWITHSUNDEEP
angularsassangular-materialangular-upgradeangular17
Bhavesh
Bhavesh

Reputation: 1071

Angular Material 17 - How to get primary color from theme in Style.scss

I have just upgraded angular app from 16 to 17. Application has custom theme as below.

custTheme.scss

@use '@angular/material' as mat;

@include mat.core();

$pp: mat.define-palette(mat.$indigo-palette);
$primary: mat.get-color-from-palette($pp);
$ap: mat.define-palette(mat.$pink-palette);
$accent: mat.get-color-from-palette($ap);
$wp: mat.define-palette(mat.$red-palette);
$warn: mat.get-color-from-palette($wp);

$theme: mat.define-light-theme((
 color: (
   primary: $pp,
   accent: $ap,
   warn: $wp,
 ),
 typography: mat.define-typography-config(),
));

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

this seem to be working fine except when I try to get primary color in Style.scss, it doesn't work

style.scss

import '/custTheme';
background-color: mat-color($primary, darker);

It doesn't seem to recognise mat-color function. what I get in browser is

color: mat-color(#616161, darker);

Can someone please explain what's happening here?

Thanks

Upvotes: 6

Views: 8691

Answers (2)

Christophe Le Besnerais
Christophe Le Besnerais

Reputation: 4713

this is working for Angular 17, and will probably change in the next release to another nonsensical solution as usual with Angular Material :

@use '@angular/material' as mat;
// for some reason you must access your theme file from the directory 
// where your component is. It will fail if you try to access it 
// from the root of the project. Also don't put the .scss extension.
@use '../../styles';

.my-class {
  // you must put "styles." before the variable name :
  color: mat.get-color-from-palette(styles.$myapp-primary, default);
}

Edit : THEY FU***** CHANGED IT AGAIN IN ANGULAR 18. Unbelievable.

If you still use the "m2" theme with Angular Material 18:

@use '@angular/material' as mat;
// for some reason you must access your theme file from the directory 
// where your component is. It will fail if you try to access it 
// from the root of the project. Also don't put the .scss extension.
@use '../../styles';

.my-class {
  // you must put "styles." before the variable name :
  color:  mat.m2-get-color-from-palette(styles.$myapp-primary, default);
}

If you use the "m3" theme with Angular Material 18:

@use '@angular/material' as mat;
@use "../../../../my-theme" as *;

.my-class {
  color: mat.get-theme-color($app-theme, primary, 50);
}

Note that if you want to assign it to a m3 theme variable the syntax is sightly different (notice the #{}):

html {
  // change the background color of the panel of all mat-select
  --mat-select-panel-background-color: #{mat.get-theme-color($app-theme, neutral, 100)};
}

Edit for Angular 19 : guess what, another new syntax for another Angular release 🤪 :

So they introduced a new way to declare theme, and if you use it you can access the colors using css variables:

.my-class {
  color: var(--mat-sys-primary);
  background-color:  var(--mat-sys-tertiary);
}

You can access differents shades of your palette using different variables described here (there is more variables available if you click on "Other available colors"). If you want to access a particular shade you are out of luck as it seems only a couple of these variable are accessibles. Also note that the Angular 18 syntax for theme seems to be still working for the moment with Angular 19.

Upvotes: 7

Naren Murali
Naren Murali

Reputation: 57986

We need to import the theme and angular material root import, then we can use mat.get-color-from-palette and input the palette and the shade required and it will work!

@use '@angular/material' as mat;
@import './theme.scss';

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 30px;
  background-color: mat.get-color-from-palette($pp, 'darker') !important;
  // background-color: $primary !important;
}

html,
body {
  height: 100%;
}

Stackblitz Demo

Upvotes: 4

Related Questions