Angular 4 material toolbar color not changing

2
votes

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

7
javascriptangularangular-cliangular-material2
Can you post a screenshot of the toolbar? - Edric

7 Answers

17
votes

Add below code in style.css

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

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'
3
votes

  1. 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
    ]
})

  2. 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>

  3. 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;
}
2
votes

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.

1
votes
  <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!

0
votes

Verify that the theme CSS is added in angular.json under projects/architect/build/options:

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

And rerun ng serve after that.

-3
votes

I was able to find only these two:

primary should be defined and exported from the class in app.component.ts

and app.component.scss should be app.component.css.

export class AppComponent {
  title = 'app';
  primary = 'red';
}

and you need to tell angular that you want it to be populated by using {{primary}} in your app.component.html file.