Angular 4 material toolbar color not changing

javascript angular angular-cli angular-material2

28,787

Solution 1

Add below code in style.css

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

Solution 2

On a simple app that exercises a library in a multi projects workspace, the toolbar remained not styled with a white background.

I could solve the issue by adding in the styles.scss file, the following import statement:

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

Solution 3

~~There's nothing wrong with your code. Can you check in your DevTools that the mat-primary class is applied to your toolbar?~~

UPDATE: It looks like you're missing the module required for mat-toolbar to work. Add MatToolbarModule to your app's module:
```
import {
    MatToolbarModule,
    // Other module imports
} from '@angular/material';

@NgModule({
    imports: [
        MatToolbarModule,
        // Other modules go here
    ]
})
```

That's because you're missing the css for Roboto. Add the import CSS in your app's index.html:

<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
</head>

You should either add mat-typography style to your body element in index.html:
```
<body class="mat-typography">
    <app-root></app-root>
</body>
```
Alternatively, add the following style to your styles.scss:
```
body {
    font-family: Roboto, sans-serif;
}
```

Solution 4

  <mat-toolbar color="primary">
  <button
    mat-icon-button
    class="cursor-pointer example-icon favorite-icon"
    aria-label="Example icon-button with heart icon"
    (click)="dataStorerService.sidenavOpen = !dataStorerService.sidenavOpen"
  >
    <mat-icon>menu</mat-icon>
  </button>

  <span>Dashboard</span>
  <span class="example-spacer"></span>
</mat-toolbar>

This is my code but the primary color was not getting reflected in the browser. on importing the below in styles.scss file

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

changes started to reflect

Reason for the issue faced: At times while installing Angular material to the project using the command

ng add @angular/material

Choose a prebuilt theme name, or "custom" for a custom theme: (Use arrow keys)

Indigo/Pink [ Preview: https://material.angular.io?theme=indigo-pink ] Deep Purple/Amber [ Preview: https://material.angular.io?theme=deeppurple-amber ]
Pink/Blue Grey [ Preview: https://material.angular.io?theme=pink-bluegrey ] Purple/Green
[ Preview: https://material.angular.io?theme=purple-green ]
Custom

incase if the installing of the theme doesn't happen properly, it might result in this issue as well!

Solution 5

No need to add color="primary".

Simply override the color of mat-toolbar in CSS by:

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

To know which CSS class to override, inspect the element in browser and then seeing the underlying CSS classes.

View more solutions

28,787

Johhan Santana

My name is Johhan Santana. I am an experienced Fullstack Javascript Developer. I can create custom systems or software using javascript technology for both front-end (ReactJS, AngularJS, jQuery, etc) to back-end (NodeJS, ExpressJS, GraphQL, etc). I have experience creating RESTfull APIs as well as building GraphQL APIs. I have experience managing relational databases using PostgresQL and noSQL databases such as MongoDB. I have experience working with linux/ubuntu and hosting services such as Google Cloud, Digital Ocean, Heroku, Vultr, AWS, Now.sh, Netlify for deploying custom servers and microservices as well as using linux as a working environment. I also have experience using TypeScript which helps maintain your code clean, easier to scale and it’s essential on big teams where more than one developer is working on the same project.

Updated on June 18, 2021

Comments

Johhan Santana almost 3 years
I'm trying to setup Angular Material for an angular 4 project.

I followed the how to get started guide and pretty much have everything except a few things
1. Toolbar component doesn't change colors when I add color="primary"
2. Font family for toolbar doesn't seem right, in fact, I think the css it's trying to fetch is not correct.
3. Font family for stuff that do not required custom material components are weird
I've setup a simple repository here using angular-cli 1.4.9
- Edric over 6 years
  
  Can you post a screenshot of the toolbar?
Edric over 6 years

primary is a correct attribute for the @Input() color. It doesn't have to be defined in app.component.ts.
Stephane almost 4 years

This is hard coding the style while skipping the theme itself.
Stephane almost 4 years

I tried each and every one of your points, on my simple app that exercises a library in a multi projects workspace, and still, the toolbar remained unstyled and white.
Edric almost 4 years

@Stephane Did you include the theming styles?
Stephane almost 4 years

Yes, see my solution above.
Stephen Holt over 3 years

This is the correct answer to this problem, which fixed it for me. The top answer above doesn't really address the underlying issue of the primary style not working, it just bypasses it through hard coding.
HibaHasan almost 2 years

you're discarding the purpose of angular material by doing so!