How to use Angular Material theme palettes

Question

I am shocked about how difficult it is to actually start using Angular Material pre-installed themes and how little tutorials there are on it. I am trying to use values from my theme using the function as explained in the official documentation:

https://material.angular.io/guide/theming-your-components

However, when I try to run this code

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

@import './styles/normalize.css'
@import 'ag-grid-community/styles/ag-grid.css'
@import 'ag-grid-community/styles/ag-theme-material.css'

$my-palette: mat.define-palette(mat.$primary-palette)

I get a SASS error that the $theme is undefined. Where is the error?

Answer 1

Oh yes. It's very tricky if you wanna style your material app. First of all, to better understanding what is to do, look at the material designer: Link. With it you can create your custom style.

Second: Here is a good video tutorial from Academind. Here you can learn what is todo and check all with the documation you linked. All you need to do is in this docu. But it's very crazy written. So this video will help!

But here is a quick guide:

1. First of all create a new file (my-theme.scss as example)
2. Inside the theme file add:

@use '@angular/material' as mat;

@include mat.core();

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

$my-theme: mat.define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-accent,
 ),
 density: 0,
));

// Emit theme-dependent styles for common features used across multiple components.
@include mat.core-theme($my-theme);

// Emit styles for MatButton based on `$my-theme`. Because the configuration
// passed to `define-light-theme` omits typography, `button-theme` will not
// emit any typography styles.
@include mat.button-theme($my-theme);

// Include the theme mixins for other components you use here.

Ok, now open the angular.json file and go to the "styles" part. You wanna find anything like node_modules/@angular/material/prebuilt-themes/....... inside the "input" property.

Replace this with your theme:

Then restart your app (call ng serve again because we changed a angular.json). And it will work as well!