How are Angular Prebuilt Themes generated? - angular-material2

Question

I am looking at the Theme Guide
It informs me that there are several prebuilt themes available:
#import '#angular/material/prebuilt-themes/deeppurple-amber.css'; is one.
Where do these themes come from?
My problem stems from trying to create my own theme. If for example, I follow the excellent angular-ngrx-material-starter black-theme.scss, then I appear to not define enough colours. My mat-select is unstyled.
I need to add one of the prebuilt themes above in order to get a full theme, but now I have purples in my theme and a general miss match of colours which I don't want. Clearly I am missing the full range of colours in my theme.
I feel that if I could see the "source" of a pre-built theme, I might have some idea how to make my own.
Would anyone be able to shine a light on this for me?

Answer 1

Shot Answer
Answer for you if your angular project is using scss. The colours are surely there if you are using a default palate from the angular material module like the example you gave above. You probably just did not add the overlay themes. Mat-select is an overlay
In your main
main.scss
#import '../node_modules/#angular/material/theming';
$anms-black-primary: mat-palette($mat-grey, 700, 300, 900);
$anms-black-accent: mat-palette($mat-blue-grey, 400);
$anms-black-warn: mat-palette($mat-red, 500);
$anms-black-theme: mat-dark-theme(
$anms-black-primary,
$anms-black-accent,
$anms-black-warn
);
#include angular-material-theme($anms-black-theme);
.whatever-theme {
#include angular-material-theme($anms-black-theme);
}
app.component.ts
export class AppComponent {
constructor(overlayContainer: OverlayContainer) {
overlayContainer.getContainerElement().classList.add('whatever-theme');
}
}
Prebuilt themes are just generated by compiling the scss file. Most of theme variables and functions are in node_modules/#angular/material/_theme.scss
Example
$(npm bin)/node-sass $FILE > $DEST_PATH/$BASENAME.css
Long Answer
To understand themes in angular you got to have a basic understanding of scss which is the default way to generate themes in angular.
https://sass-lang.com/guide
To have a good example of scss styling in a proper angular project will be the material docs repo. https://github.com/angular/material.angular.io.
In node_modules/#angular/material/_theming.scss you can see how the theme variable are defined and define custom themes on your own.
A good answer for creating custom themes.
How can I use custom theme palettes in Angular?