change default theme in angular material

Question

how can change default theme in angular material?

For change from indigo-pink.css to purple-green.css

In angular.json I change from

 "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ]

to

 "styles": [
              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ]

But after changing the style, materials element are not displayed...

I import css but still does not show material element. please help me

Answer 1

In angular 8 we must create src\styles.scss file with

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

Then add styles.scss to angular.json like this

"styles": ["src/styles.scss"]