Geek Answers Handbook

Primary Color Change in Angular Material 2

I am trying to change the default foreground color in Angular Material 2 (alpha 6).

I have an idea from this white paper.

I located _default-theme.scss from node_modules > @angular2-material > core > style and replaced the colored tial with purple in the next line.

 $md-primary: md-palette($md-teal, 500, 100, 700, $md-contrast-palettes);

But the color tial is still displayed on the page, and pink does not appear. What am I missing? How to change the primary color?

(I am using Angular Material 2 alpha 6 with Angular 2 RC4)

+5
source share
2 answers

Angular 4+ and Angular Material 2.0.0 beta 10, Angular CLI 1.3 +

You will need to create a scss file "exampleTheme.scss", you will add it to your angular-cli.json angular-cli.json:

 "styles": [ //if you are using --scss the file is called style.scss "styles.css", "customTheme.scss" ],

In customTheme.scss you can change your colors by using the following code:

 @import ' ~@angular /material/theming'; @include mat-core(); $primary: mat-palette($mat-blue,200); $accent: mat-palette($mat-orange,200); $theme: mat-light-theme($primary, $accent); @include angular-material-theme($theme);`

Multiple Topics If you would like an additional topic, please read the manual at the end. But here is a small overview that you just need to reproduce the theme process with new variables and colors

  $dark-primary: mat-palette($mat-blue,800); $dark-accent: mat-palette($mat-orange,800); $dark-theme: mat-dark-theme($primary, $accent);

and add

  .material-dark-theme { @include angular-material-theme($dark-theme); }

for more details you should read the angular2 material topics guide

+16
source

I just overcame this problem today ...

As said above, this is officially impossible, but you can overwrite colors separately in sass files. This works a little, but it works very well.

The structure of my scss file

 /scss --/angular-material -- _button.scss -- _checkbox.scss -- _input.scss -- //etc -- angular-material.scss // I @import all angular-material files into this main.scss // angular-material is imported into my main scss file...

As an example ... my angular -material / _input.scss looks like this:

 :root md-input { @extend %typo-base; padding-top: 1px; .md-input-placeholder { color: $light-grey-color; } .md-input-placeholder.md-focused { color: $primary-color; } .md-input-underline { border-color: $light-grey-color; } .md-input-underline .md-input-ripple { background-color: $primary-color; } //...etc }

Selector :root breaks through the shadow house to override styles. Color variables are imported from my main theme into the angular-material.scss file so that they can be used in any of the material override files.

Hope this helps.

0
source

More articles:


All Articles