How to use colors of the prebuilt angular-material themes?

Question

In my angular app that I'm building for a demo, I've some kind of toolbar that I need to distinguish a bit from the background. I was willing to use a shade of the prebuilt-theme I'm using(purple-green). My understanding is that google's material guide describe shades of the primary color: https://material.io/resources/color/#!/?view.left=0&view.right=0 that would be ideal for my case

I'm strugling to find how to do such a simple thing. In ionic, you could use color="primary", but here, I'm using one of the prebuilt theme in my styles.scss:

@import '@angular/material/prebuilt-themes/purple-green.css';

I tried several things

@import '~@angular/material/theming';
.chat-header {
  color: mat-color($primary);
}

My understading is that since this prebuilt theme is just pure CSS, it doesn't have a SCSS variable. But how am I supposed to use their colors in one of my component then?

Is there some predefined CSS classes that I could use? I've searched but didn't found any?

Answer 1

I guess you will have to resort to grabbing the scss version of the theme-definition and extract the adjusted values to your liking. The scss sources don't seem to be bundled with the material distribution, so go to https://github.com/angular/components/blob/master/src/material/core/theming/prebuilt/purple-green.scss to see its source. Then:

my-custom-theme-definition.scss

@use '@angular/material' as mat;

// taken from https://github.com/angular/components/blob/master/src/material/core/theming/prebuilt/purple-green.scss

// Define a theme.
$my-custom-primary: mat.define-palette(mat.$purple-palette, 700, 500, 800);
$my-custom-accent: mat.define-palette(mat.$green-palette, A200, A100, A400);

$my-custom-theme: mat.define-dark-theme((
        color: (
                primary: $my-custom-primary,
                accent: $my-custom-accent
        )
));

my-custom-theme.scss (import once in your global styles.scss)

@use '@angular/material' as mat;
@import './my-custom-theme-definition';

// IMPORT ONLY ONCE, AS ALL STYLES ARE BEING OUTPUT

// Include non-theme styles for core.
@include mat.core();

// Include all theme styles for the components.
@include mat.all-component-themes($my-custom-theme);

other-component.scss

@use 'sass:map';
@use '@angular/material' as mat;

@import 'my-custom-theme-definiton';

$hue: 700; // or 50 or some key defined in any palette definition https://github.com/angular/components/blob/master/src/material/core/theming/_palette.scss

.chat-header {
  color: mat.get-color-from-palette(map.get($my-custom-theme, primary), $hue); 
}