How to fix the error “Could not find Angular Material core theme” in Angular 2?

You have to import a theme into your global css or sass file:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

or alternatively include it in your index.html file:

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

As in the theming documentation already mentioned Angular Material provides the following pre-built themes:

You have to include one of these themes or you create your own custom theme.

Adding @import to styles.css doesn't work for me, adding theme to angular.json did the trick

You can replace the default angular-material-theme with one of the above-mentioned angular-material-themes using the following ways.

You can directly include the pre-built angular-material-theme in the styles.css file.

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

Or Add the following inside the head tag of index.html file.

<link href="node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css" rel="stylesheet">

Or Update the following in angular.json file.

"styles": [
{
"input": "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
},
"src/styles.css"
],

Related