2

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?

Clark
  • 2,598
  • 3
  • 27
  • 41
  • How are you using that file? That file is a SASS partial (which should be prefixed with an underscore). It is meant to be imported with a lot of other things and used merely to create a theme. It does not apply anything - it is just something you can use to define a theme. You would still need to apply the theme via the standard [Angular Material theming](https://material.angular.io/guide/theming#defining-a-custom-theme). The pre-built themes are complete CSS that only require you to included them in your application or page. – G. Tranter Dec 07 '18 at 19:18

1 Answers1

2

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?

chronolegend
  • 474
  • 3
  • 13