CODEWITHSUNDEEP
angularangular-materialtoolbar
Reza Taba
Reza Taba

Reputation: 1904

MatToolbar color doesn't work on Angular Material v18 Red/Rose

I just upgraded my Angular CLI and Angular Material both to v18. All Angular Material components work fine except the MatToolbar. The problem is that the color input doesn't do anything in the mat-toolbar tag. The toolbar color currently is so close to the background which is white and there's only a shade of it visible.

Here's the code.

<mat-toolbar color="primary"></mat-toolbar>

Is anyone experiencing the same issue? Any solution found?

Thanks in advance.

I tried

Expecting The toolbar to look like the Angular website with the Rose/Red theme. https://material.angular.io/components/toolbar/overview

UPDATE

Please before responding pay attention that my question is not about how to manually add/edit a custom theme. Here's the clearance;

<button mat-button color="primary">Button</button> Works

<mat-icon color="primary">home</mat-icon> Works

<mat-toolbar color="primary">toolbar space</mat-toolbar> Does NOT work. Why?

Upvotes: 14

Views: 8053

Answers (5)

Brijesh Ray
Brijesh Ray

Reputation: 1303

Simply, import below in style.css and color="primary" would work(assuming you have installed angular material and imported MatToolbarModule,MatButtonModule in app.module.ts)-->

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

Upvotes: 1

Martin Schneider
Martin Schneider

Reputation: 15388

I was also looking several times for a simple solution that does not involve to redefine a new theme, since I just wanted to use one of the given default themes.

The current (v19) docs of Angular Material now finally include a "Styling" tab that gives us a simpler solution:

In your global style.scss do:

@use '@angular/material' as mat;

:root {
  @include mat.toolbar-overrides((
    container-background-color: var(--mat-sys-primary-container),
    container-text-color: var(--mat-sys-primary),
  ));
}
  • container-background-color and container-text-color are pre-defined tokens by Angular Material.
  • --mat-sys-primary-container and --mat-sys-primary are also pre-defined variables that will have the correct values depending on the selected pre-defined theme. I have found these two via the browser's dev tools, inspecting the Doc's toolbar. You can find all available "system variables" in the docs: https://material.angular.io/guide/system-variables

If you want to limit the scope to a specific component, use a custom class selector (e.g. .my-toolbar) instead of :root and add the code block to the corresponding *.component.scss file instead of the global styles file.

For the toolbar icon buttons from the Doc's example to work, add this to the *.component.scss where you have implemented the toolbar:

.example-icon {
  color: var(--mat-sys-primary);
}

Upvotes: 1

M. Al Jumaily
M. Al Jumaily

Reputation: 973

Using Angular 18.0.4: It took me several days to figure this out. What you need is the following in your styles.css:

:root {
  mat-toolbar {
    --mat-toolbar-container-background-color: #{mat.get-theme-color($theme, primary, 40)};
  }
}

Ensure to wrap the colour using #{...} You might be able to remove the mat-toolbar tag and keep the one-liner in :root{ ... } if one theme is being used. However, if a light theme and a dark theme are used, then use the following snippet:

$light-theme: mat.define-theme((color: (theme-type: light,
        primary: mat.$azure-palette,
        tertiary: mat.$blue-palette,
      )));

$dark-theme: mat.define-theme((color: (theme-type: dark,
        primary: mat.$magenta-palette,
        tertiary: mat.$violet-palette,
      )));

@include mat.core();
@include mat.color-variants-backwards-compatibility($light-theme);

:root {
  @include mat.all-component-themes($light-theme);
}

.dark-theme {
  @include mat.all-component-colors($dark-theme);
  --mat-toolbar-container-background-color: #{mat.get-theme-color($dark-theme, primary, 30)};

}

.light-theme {
  --mat-toolbar-container-background-color: #{mat.get-theme-color($light-theme, primary, 80)};
}

To test the light/dark theme, use:

<div style="margin: 8px"></div>
<div ngClass="light-theme">
  <mat-toolbar>
    <button mat-button>First</button>
    <button mat-button>Second</button>
    <button mat-button>Third</button>
  </mat-toolbar>
</div>
<div style="margin: 8px"></div>
<div ngClass="dark-theme">
  <mat-toolbar>
    <button mat-button>First</button>
    <button mat-button>Second</button>
    <button mat-button>Third</button>
  </mat-toolbar>
</div>

The output should be

Output

The only incompleteness I recognize is color="primary" or color="secondary" or other colour wouldn't work as they will be overridden by the colour in #{...}. In case there is a workaround this, please update this comment and write the solution.

Upvotes: 2

UnlikePluto
UnlikePluto

Reputation: 3389

You are mixing the concepts for material design M2 and material design M3. The options color="primary", color="accent", and color="warn" are color variant options for M2 design theming.

The Angular team recommends not relying on these options in M3. However, they provide backward compatibility styles that restore the behavior of the API in case you want to transition from M2 to M3 theming:

@use '@angular/material' as mat;

$theme: mat.define-theme();

html {
  @include mat.all-component-themes($theme);
  // This line allows you to use color="..." for your toolbar.
  @include mat.color-variants-backwards-compatibility($theme);
}

You can read more about this in the theming documentation here.

Upvotes: 3

Naren Murali
Naren Murali

Reputation: 57986

The docs for this are from material.angular.io/src/app/shared/navbar /_navbar-theme.scss

We can use the mixin provided below and manually set the desired background-color. Do refer the example scss file in the link for more options.

@use '@angular/material' as mat;

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$rose-palette,
      tertiary: mat.$red-palette,
    ),
  )
);

@include mat.core();
@include mat.color-variants-backwards-compatibility($theme);

@mixin theme($theme) {
  app-navbar {
    color: mat.get-theme-color($theme, primary);

    mat-toolbar {
      background: mat.get-theme-color($theme, primary-container);
    }
  }
}

:root {
  @include mat.all-component-themes($theme);
  @include theme($theme);
}

Stackblitz Demo

Upvotes: 2

Related Questions