2

I am having trouble with Angular4, @angular/cli and custom themes in Material. I have searched many times for tuts and read and reread the docs, but nothing works. I'm afraid this seems to be something a few people have asked, but the answers to their questions don't seem to work for me and seem to correspond to earlier versions of angular and angular-cli.

I can get the prebuilt themes to work, but when I try to use custom themes nothing happens. There must be some step I'm not doing, but it seems from the tuts that I just need to add a scss file containing my custom theme to my src folder and add the filename to the styles section of angular-cli.json

I have tried various @import syntax and it does not seem to be importing? Does

@import '~@angular/material/theming'

work or should it be

@import '~@angular/material/_theming'

or even

@import '~@angular/material/_theming.scss'

?

Do I need a separate @import in my styles.css file?

I cannot find any tutorials that work, and the documentation seems to leave things out. Are custom themes just broken, as many people seem to claim?

Davtho1983
  • 3,827
  • 8
  • 54
  • 105

2 Answers2

1

This is what worked for me:

@import "../node_modules/@angular/material/_theming.scss";

I also followed the instructions here:

Angular 2 Material Custom Themes

fatfrog
  • 2,118
  • 1
  • 23
  • 46
1

create a .scss file that you can name anything. In that file, you need to add the custom themes... note it is important for angular io (or angular 4) to first import "theming" from the @angular/material 's module... let me paste a snippet/example of what the file will contain. Here we go...

@import '~@angular/material/theming';
@include mat-core();

$app-primary: mat-palette($mat-green, A400);
$app-accent:  mat-palette($mat-light-blue, A400);
$app-warn: mat-palette($mat-red);
$app-grey: mat-palette($mat-grey, A50);


$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);

@include angular-material-theme($app-theme);

Save that file... then import it into your main css file (the css file that styles your index.html or create one if you don't have any and it is imperative that it is .scss as this will compile to sass) like so

Here we go again...

@import "path/to/your/theme_file.scss";

Lastly... in your .angular-cli.json under the key "styles", also add the path to the custom theme file as one of the values to that key. Then your good to go... but remember... when using the @angular/material module... you have to import every component from the module into your app.module.ts in order to use them well in your project say 

import { MaterialModule, MdDialogModule, MdInputModule, MdRadioModule, MdDatepickerModule, MdMenuModule, MdToolbarModule, MdIconModule, MdProgressSpinnerModule } from '@angular/material';

and then into the imports key like so 

imports: [
BrowserModule,
FormsModule,
HttpModule,
BrowserAnimationsModule,
MaterialModule,
MdInputModule,
MdDialogModule,
MdRadioModule,
MdDatepickerModule,
MdMenuModule,
MdToolbarModule,
MdIconModule,
MdProgressSpinnerModule

]

...hope this helps with your issue.

AB Johnson
  • 26
  • 1