Angular material Could not find Angular Material core theme

Question

In my Angular2 project I install lastest material plugin from https://material.angular.io/guide/getting-started. Next I add @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; to my css file for my component. But in my console Angular shows this error:

material.es5.js:148 Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming`

The material components not working. Whats wrong?

If I recall correctly, this file is a SASS file (.scss), maybe you can try with that? — user4676340
– user4676340, Commented May 28, 2017 at 19:09
No, you don't have sass files, but the angular material module does. That's how you use your own theme (again, if I recall correctly), so try seeing in the node module if it's a SASS or css file. — user4676340
– user4676340, Commented May 28, 2017 at 19:15
If you're working on a custom theming project, and you added a file to your "angular.json" file, make sure you stop the ng serve and restart it for the new "theme.scss" to load. — Jonathan
– Jonathan, Commented Jun 25, 2018 at 1:48

codelovesme · Accepted Answer · 2021-10-30 12:01:27Z

263

Please insert below code into your styles.css which is located in your src folder.

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

You can select any css under the prebuilt-themes folder.

edited Oct 30, 2021 at 12:01

answered Jun 8, 2017 at 12:55

codelovesme

3,2972 gold badges19 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

btpka3 Over a year ago

Just as @jelbourn mentioned at Issues 4739: Load prebuilt-themes in Global (styles.css), rather than in Component's styleUrls.

BraveNinja Over a year ago

Use ~ for easier path to node modules. Example: @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

caruso_g Over a year ago

As @BraveNinja said, tilde "~" allows you to avoid issues with paths. See stackoverflow.com/a/39535907/877464 for a better explanation why.

Kirill G. Over a year ago

@Trevor the link has become broken, that paragraph is not there anymore

Trevor Over a year ago

Updated link to docs: material.angular.io/guide/theming#using-a-pre-built-theme

|

Mohammad Zeeshan · Accepted Answer · 2018-06-19 11:17:18Z

43

put that code into your angular-cli.json file

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

it's works fine for me

answered Jun 19, 2018 at 11:17

Mohammad Zeeshan

9151 gold badge9 silver badges20 bronze badges

5 Comments

Sum_Pie Over a year ago

This is the real correct answer. Never use style.css for import other css. ALWAYS use angular.json file.

Rocco Over a year ago

@Bluex why is this better?

Sum_Pie Over a year ago

@Rocco because it’s like style css in-line.. it works but is not a good solution rather is the worst

L. Theodore Obonye Over a year ago

This is the best answer. If you get this error with later versions 9+ after running ng add @angular/material just terminate the batch job and re-run the app, sometimes the configs aren't fully loaded when compiling.

danday74 Over a year ago

The latest docs demand this approach ... material.angular.io/guide/theming#using-a-pre-built-theme

cmcevoy · Accepted Answer · 2017-07-26 11:00:31Z

20

I got it working with the following steps:

1) Import this (or other) Material theme into your main css file:

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

2) Also make sure to register this main css file with the app.component file

@Component({
  selector: 'app',
  styleUrls: [
    './app.component.css'
  ]
})

3) Double check that the components you need are imported from @angular/material in your app.module file

import { MdCardModule, MdInputModule } from '@angular/material';

answered Jul 26, 2017 at 11:00

cmcevoy

2011 silver badge4 bronze badges

1 Comment

Yasar Arafath Over a year ago

not working because node_modules\@angular\material_theming.scss is overriding

nPcomp · Accepted Answer · 2019-04-15 14:59:12Z

10

Add the following line to your src/styles.css

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

You can try other Css classes as well. Here are the available classes:

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

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

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';

@import '~@angular/material/prebuilt-themes/purple-green.css';

answered Apr 15, 2019 at 14:59

nPcomp

10.3k5 gold badges60 silver badges54 bronze badges

1 Comment

Yasar Arafath Over a year ago

not working because node_modules\@angular\material_theming.scss is overriding

G.Vitelli · Accepted Answer · 2019-02-14 09:24:17Z

7

If you need only the material icons and you don't want import the whole material css use this, in your root css:

/** disable angular mat theme warning */
.mat-theme-loaded-marker {
  display: none;
}

answered Feb 14, 2019 at 9:24

G.Vitelli

1,28711 silver badges19 bronze badges

Comments

grrigore · Accepted Answer · 2019-03-07 00:11:15Z

6

Add:

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

to your style.css

edited Mar 7, 2019 at 0:11

grrigore

1,1102 gold badges24 silver badges42 bronze badges

answered Nov 14, 2017 at 12:55

pulkeet

1271 silver badge2 bronze badges

Comments

Peyman Mohamadpour · Accepted Answer · 2020-06-04 09:17:16Z

5

Add

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

to the style.css file, OR add

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

in the head section of index.html file

edited Jun 4, 2020 at 9:17

Peyman Mohamadpour

18k24 gold badges94 silver badges102 bronze badges

answered Jun 4, 2020 at 7:16

Vishnu Mehta

511 silver badge4 bronze badges

Comments

The Aelfinn · Accepted Answer · 2017-08-20 23:45:11Z

4

If this is happening during testing with Karma, add the following pattern to the files list in your karma.config.js file.

module.exports = function (config) {
   config.set({
    basePath: '',
    ...,
    files: [
        {pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css', included: true, watched: true}
    ],
    ...
}

For more detail see here: https://www.bountysource.com/issues/44073085-a-testing-with-material-components-guide-to-demonstrate-including-core-theme-in-test-suite

answered Aug 20, 2017 at 23:45

The Aelfinn

17.9k3 gold badges57 silver badges46 bronze badges

Comments

Deepak · Accepted Answer · 2020-07-06 12:16:50Z

4

I don't know how many may find this useful, but restarting ng server worked after trying different solutions from Stack overflow.

answered Jul 6, 2020 at 12:16

Deepak

2,7522 gold badges13 silver badges31 bronze badges

1 Comment

Mr. Disability Over a year ago

This has helped me twice now lol

LargeDachshund · Accepted Answer · 2017-08-23 22:50:42Z

3

If you're using Angular-CLI, you'll need to make a reference to the themes file, e.g. "candy.scss" in the .angular-cli.json file. Look closely, do you have a *.scss? It's a Sass file. Look here for information: Angular Material 2 Theming instructions. So, in the .angular-cli.json, under the styles property, add "themes/candy.scss", next to the "themes/styles.css". I have a folder in my projects called "themes". I put the styles.css and the candy.scss in the themes folder. Now, Angular-CLI can find your theme.

answered Aug 23, 2017 at 22:50

LargeDachshund

9364 gold badges12 silver badges25 bronze badges

Comments

Venkatesh Muniyandi · Accepted Answer · 2017-12-12 19:38:31Z

2

In addition to @import statements as mentioned above. Please ensure you add encapsulation: ViewEncapsulation.None inside @Component decorator.

@Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None})

If you are looking for Angular Material setup for .Net core 1.1 or 2.0 Angular SPA visual studio template. Please find the well documented setup instruction details here.

edited Dec 12, 2017 at 19:38

answered Dec 12, 2017 at 12:01

Venkatesh Muniyandi

5,7312 gold badges43 silver badges48 bronze badges

Comments

naila naseem · Accepted Answer · 2018-04-20 07:45:47Z

0

worked for me adding in css section of index.html

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

As mentioned here here

answered Apr 20, 2018 at 7:45

naila naseem

6073 gold badges13 silver badges22 bronze badges

Comments

BenSimpsy · Accepted Answer · 2019-02-12 11:18:59Z

0

Check any other @imports in your css or scss file. I experienced this issue and could not resolve it until other imports had been removed.

answered Feb 12, 2019 at 11:18

BenSimpsy

1

Comments

octogenex · Accepted Answer · 2019-08-08 15:58:36Z

0

Add @import "~@angular/material/prebuilt-themes/indigo-pink.css"; to style.css of your angular project .

In case you want any other theme just folow the steps: Node modules -> @angular -> material -> prebuilt-themes ->

i)deeppurple-amber : @import "~@angular/material/prebuilt-themes/deeppurple-amber.css

ii)indigo-pink : @import "~@angular/material/prebuilt-themes/indigo-pink.css

iii)pink-bluegrey : @import "~@angular/material/prebuilt-themes/pink-bluegrey.css

iv)purple-green : @import "~@angular/material/prebuilt-themes/purple-green.css

And if you want to read you can visit :Theming your Angular Material app

answered Aug 8, 2019 at 15:58

octogenex

1301 silver badge9 bronze badges

Comments

user12465043 · Accepted Answer · 2020-01-15 08:15:06Z

0

I had the same error as you and I found the solution in one of the comments. Since that solution worked for me, I want to post it as an answer.

If your project was already running and you installed your material components afterwards, you need to restart your project first. That alone can be the fix already.

answered Jan 15, 2020 at 8:15

user12465043

Comments

Slava Rozhnev · Accepted Answer · 2021-06-19 08:28:46Z

0

Material design modules contains scss, migrate css files into scss from following two steps:

npm i schematics-scss-migrate
ng g schematics-scss-migrate:scss-migrate

Hope this works fro everyone :)

edited Jun 19, 2021 at 8:28

Slava Rozhnev

10.2k6 gold badges27 silver badges43 bronze badges

answered Jun 19, 2021 at 3:18

Neeraj Jha

1

Comments

Harshal Patil · Accepted Answer · 2023-06-10 05:09:15Z

0

I also encountered the same error once. What worked for me was to stop and restart ng serve. If you are serving your angular app when adding material or making changes in angular.json, you must restart ng serve for changes to take effect.

answered Jun 10, 2023 at 5:09

Harshal Patil

334 bronze badges

Comments

Goktug Fevzi Ozcelik · Accepted Answer · 2024-05-03 08:23:17Z

0

If you import like this import { MatTableDataSource, MatTableModule } from '@angular/material/table';

But you don't use one of them. Delete it, error solved.

FOREXAMPLE:

From

import { MatTableDataSource, MatTableModule } from '@angular/material/table';

TO

import { MatTableModule } from '@angular/material/table';

answered May 3, 2024 at 8:23

Goktug Fevzi Ozcelik

111 bronze badge

Collectives™ on Stack Overflow

Angular material Could not find Angular Material core theme

18 Answers 18

6 Comments

5 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

18 Answers 18

6 Comments

5 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related