Check out this example I put together on stackblitz to see how you can create a theme in angular with lighter and darker color variations based on the palette color.
Below is the key code snippet:
theme.scss:
@import '~@angular/material/theming';
@include mat-core();
$custom-primary: mat-palette($mat-teal);
$custom-accent: mat-palette($mat-pink, A200, A100, A400);
$custom-warn: mat-palette($mat-red);
$custom-theme: mat-light-theme($custom-primary, $custom-accent, $custom-warn);
@include angular-material-theme($custom-theme);
This file creates a custom theme and sets a light theme.
variables.scss:
@import './theme.scss';
$primary: mat-color($custom-primary);
$primary-lighter: mat-color($custom-primary, lighter);
$primary-darker: mat-color($custom-primary, darker);
In the above code, three variables are defined containing the primary color, a lighter shade, and a darker shade based on the primary color specified in the theme.
Note that when defining lighter and darker colors, they must be derived from a color within your palette. You cannot simply select any random color (even if it's an Angular color). For instance, for a red color, you would need to use $custom-warn. If you still require to lighten or darken a color outside of the palette, you can utilize SCSS mixins like lighten and darken:
lighten($myColor, 30%), same goes for darken.
To implement this theme and variables, make sure to import theme.scss in
styles.scss</code, and wherever you want to use your custom variables, include <code>variables.scss
- that's all you need to do.