CODEWITHSUNDEEP
angularangular-material
Ketuf Wtf
Ketuf Wtf

Reputation: 31

how to grab the primary dark color from angular material or what are all color variables we can use with angular material?

Hi how do we use the primary dark color from angular material? I have used color="p-dark" but it is not working.

How do we grab the dark color the material color tool has defined? I would like to use the dark color that is defined with the following helper website:

https://material.io/resources/color/#!/?view.left=1&view.right=0&primary.color=FFF9C4

Do we have to define it in our custom theme?

Or could someone share all color variables that we can use with angular material?

Upvotes: 3

Views: 5707

Answers (2)

Christophe Le Besnerais
Christophe Le Besnerais

Reputation: 4693

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: 0

Arnaud Denoyelle
Arnaud Denoyelle

Reputation: 31225

I don't know if it is possible to do it directly with predefined CSS classes but here is how to do it in SCSS.

I suppose as a starting point that your theme is defined like this :

my-material-theme.scss

[...]
$my-app-theme: mat.define-light-theme($app-primary, $app-accent, $app-warn);

Then, in your component SCSS :

my.component.css

@use 'sass:map';
@use '@angular/material' as mat;
@import 'path/to/my-material-theme';


$color-config: mat.get-color-config($my-app-theme);

// get the chosen palette : primary, accent, warn
$primary-palette: map.get($color-config, 'primary');

.my-class {
  color: mat.get-color-from-palette($primary-palette, 700);
}

More info in :

Upvotes: 7

Related Questions