Changing Primary Color in Angular Material 2

Question

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

I got some idea from this official doc.

I located _default-theme.scss from node_modules > @angular2-material > core > style and replaced the color teal by purple in the following line.

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

But the color teal is still shown in the page and pink never appears. What am I missing? How can I change the primary color?

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

You can't do that. That is just the source code. But actual material component you will use is already built into js with the built css styles already embedded. Currently there isn't support for changing variables through sass. You can follow along this issue (which I'm sure many are anticipating the resolution of). — Paul Samsotha
– Paul Samsotha, Commented Aug 3, 2016 at 4:46

moffeltje · Accepted Answer · 2022-11-12 22:01:35Z

45

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

You will have to create a scss file "exampleTheme.scss" , you 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 your customTheme.scss you can change your colors in use of 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 Themes If you want to have an additional theme please read the guide linked in the end. But here a small overview you just have to replicate the theming 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 detailed information you should read the angular material theme guide

edited Nov 12, 2022 at 22:01

moffeltje

4,6888 gold badges40 silver badges65 bronze badges

answered Nov 19, 2016 at 11:58

Daniel Hoppe Alvarez

1,3581 gold badge13 silver badges18 bronze badges

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

5 Comments

LargeDachshund Over a year ago

Daniel, thanks for the in depth explanation. do you import $theme into style.css or does the app just see your reference in angular-cli.json?

Ryan Skoblenick Over a year ago

The above answer is the most correct approach for the Angular CLI. For the latest documentation see github.com/angular/material2/blob/master/guides/theming.md; note the variable prefixes have been changed. @LargeDachshund If you are using the Angular CLI it will automagically be injected into the DOM by when transpiled.

yaircarreno Over a year ago

Right solution, I would like to add that for Angular 4 and Angular Material 2.0 there is an update at material.angular.io/guide/theming , the process is the same but code changed a little.

Daniel Hoppe Alvarez Over a year ago

updated the post accordingly, would you take a look ? Did I forget something ?

Jignesh Panchal Over a year ago

Is it possible to change custom code like #CE2029

markstewie · Accepted Answer · 2016-08-04 09:16:02Z

0

I just overcame this problem today...

As the comment above states, it's not possible officially yet but you can overwrite the colours individually in sass files. It's a bit of work but does work very well.

My scss file structure

/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
}

The :root selector pierces the shadow dom to override the styles. The colour variables are imported from my main theme into the angular-material.scss file so they can be used in any of the material override files.

Hope this helps.

answered Aug 4, 2016 at 9:16

markstewie

9,75710 gold badges52 silver badges73 bronze badges

2 Comments

brando Over a year ago

This looks promising. Of course, its not ideal, since css gets bloated with redundant styles, but hopefully soon there will be an easy and efficient way to modify ng2-material styles

markstewie Over a year ago

Definitely not ideal! But at least if/when they do introduce styling these styles can easily be deleted (as they are kept seperate from the rest of the app styles) and proper theming will easily be able to be added with whatever system they introduce. Until then... this is the best I could come up with.

Collectives™ on Stack Overflow

Changing Primary Color in Angular Material 2

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related