Create Angular Theme without using Material's palette colors

Question

Is it possible to create a theme in angular material with your own hex codes?

instead of something like this

$my-theme-primary: mat-palette($mat-blue, 800);
$my-theme-accent: mat-palette($mat-orange);
$my-theme-warn: mat-palette($mat-red);
$my-theme: mat-light-theme($my-theme-primary, $my-theme-accent, $my-theme-warn);

do something like this

$my-theme-primary: #1565C0;
$my-theme-accent: #f4b942;
$my-theme-warn: mat-palette($mat-red);
$my-theme: mat-light-theme($my-theme-primary, $my-theme-accent, $my-theme-warn);

Basically I have users creating their own themes

Answer 1

Yes - but not the way you've shown. 'Theme' objects are made up of 'palettes' created using the mat-palette function which returns a map of key-color pairs. You can use your own hex color values in the palette objects - that is the standard way to add a custom theme. See https://material.angular.io/guide/theming#defining-a-custom-theme.

Answer 2

$mat-primarycolor: (
500: #1565C0
);
$mat-accentcolor: (
 500: #f4b942
);

$my-theme-primary: mat-palette($mat-primarycolor);
$my-theme-accent:  mat-palette($mat-accentcolor);
$my-theme-warn: mat-palette($mat-red);
$my-theme: mat-light-theme($my-theme-primary, $my-theme-accent, $my-theme-warn);

Please try this code. It helps