How to override angular 8 material styles colors using a variable?

Question

I need to change background color for this css code

.mat-toolbar.mat-primary {

background

: #d12626; color: #fff; }

.mat-toolbar.mat-primary {
    background: #d12626;
    color: #fff;
}

I need to change the background for the above code. How to do that
I tried

 [ngStyle]='    .mat-toolbar.mat-primary {
        background: #d12626;
        color: #fff;
    }
'

But not working
Then i got another suggestion from stackoverflow

[style.font-size]="fontSize+'px'" this code is working for 'font-size' but not woking for my need code this is my need  [style.mat-toolbar.mat-primary.background]='#d12626'; but not working

I used this

.mat-toolbar.mat-primary {
        background: #d12626;
        color: #fff;
    }

code inside CSS code and it is working but I need to change the color dynamically.
I also need to update his colors
primaryColor
primaryLightColor
primaryDarkColor
secondaryColor
secondaryLightColor
secondaryDarkColor
primaryTextColor
secondaryTextColor

score 1 · Answer 1 · answered Apr 18 '20 at 12:44

1

dont set the material color as primary or secondary then you can use ngStyle like this

<mat-toolbar [ngStyle]="{background:bgColor , color:'#fff'}">
  <mat-toolbar-row>
    <span>Main Toolbar</span>
  </mat-toolbar-row>
</mat-toolbar>

bgColor is just a component property, when you don't set the color property the component don't have any class so it 's easy to change the style

demo

answered Apr 18 '20 at 12:44

Muhammed Albarmavi

23,240
8
66
91

I need to update primaryTextColor also. How to do that? – Midhilaj Apr 18 '20 at 12:51
#ef9a9a #ffcccb #ba6b6c #ab47bc #df78ef #790e8b #000000 #ffffff – Midhilaj Apr 18 '20 at 12:52
the same wht we did for the backgroud we can do it for the color – Muhammed Albarmavi Apr 18 '20 at 12:54
are you try to change the material colors and you want this to reflect to theme it self for all component in the hole project ? like you give the user the option to change the theme base color ? – Muhammed Albarmavi Apr 18 '20 at 12:58
Yes, i need to allow user to change color for my app – Midhilaj Apr 18 '20 at 12:59
1

i need to show a preview in admin panel to make user easy to identify the right color for them and the preview is showing in angualr metrial ui – Midhilaj Apr 18 '20 at 12:59
I got you point let me see if I have a way for this because your current answer will not work for you – Muhammed Albarmavi Apr 18 '20 at 13:00
I am allowing user to upload xml from from this website to my admin panel and it will distrbute to the app https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=EF9A9A&secondary.color=AB47BC – Midhilaj Apr 18 '20 at 13:01

Abdelrhman Arnos · Answer 2 · 2020-04-18T13:36:11.847

0

Dynamic styles

You should make the CSS properties as camelcase, for the font-size should be like this [style.fontSize.px]. You check other solutions from how-to-apply-dynamic-styles?.

Override styles

We can do so using by combining the :host with the ::ng-deep selector and most probably using for overriding Material styles:

:host ::ng-deep h2 {
    color: red;
}

Custom theme for Angular Material

You can change a set of colors that will be applied to the Angular Material components. https://material.angular.io/guide/theming

edited Apr 18 '20 at 13:36

answered Apr 18 '20 at 12:33

Abdelrhman Arnos

1,404
3
11
22

I need to update this css code background .mat-toolbar.mat-primary { background: #d12626; color: #fff; } so you mean to make change like this [style.matToolbar.matPrimary.background="my varible"? is that correct? – Midhilaj Apr 18 '20 at 12:35
1

Are you mean overriding the material styles? – Abdelrhman Arnos Apr 18 '20 at 12:38
Great, it's simple to do with `::ng-deep`, I will edit the answer for more explanation. – Abdelrhman Arnos Apr 18 '20 at 12:45

score 0 · Answer 3 · answered Apr 18 '20 at 18:48

Without hack, it's not possible to change on the fly the colors of you angular application because the way to style your application using Angular Material is to use theming (that is described here https://material.angular.io/guide/theming) and your theming scss files will be compiled to css at build time.

I think the only hack to change colors of your app on the fly is to identify the hex color that you want to change (for primary, secondary, etc...) and you rewrite your style tag in your document using serch / replace.

But keep in mind that Angular Material is not designed to let user change theme and colors because they provide palette and hue that have been designed to provide good contrast and best practice regarding UX. That's why the solution I give you is really a hack.

Muhammed Albarmavi · Answer 4 · 2020-04-18T19:39:06.380

the matrial dynamic color will be possible if the main set by css variable instaid of static hex values ,someone already publish a library to solve this by overwrite the main color to be used by css variables.

1️⃣ install angular-material-css-vars library npm i angular-material-css-vars -S

2️⃣ import MaterialCssVarsModule on app module

@NgModule({
  imports: [
    ...
    MaterialCssVarsModule.forRoot(),
  ],
   ...
})
export class AppModule {}

3️⃣ use this service MaterialCssVarsService to change angular material main color like primary ,secondary, warm...

export class component {
  constructor(public materialCssVarsService: MaterialCssVarsService) {
    const hex = "#3f51b5"; // set default color color
    this.materialCssVarsService.setPrimaryColor(hex);
  }

  setPrimaryColor(color: string) {
    this.materialCssVarsService.setPrimaryColor(color);
  }
}

you need to remove any existing @import '~@angular/material/theming'; from your main stylesheet file.

demo ‍♂️

you may check this question create angular material theme with css variables for more help

I think this is the right answer. I will check as soon as possible — Midhilaj, Apr 19 '20 at 07:54

How to override angular 8 material styles colors using a variable?

4 Answers4