css Question posted in
Some basic documentation can be found here.

Css – How do I apply color to Angular mat-sidenav?

I’m starting to learn Angular and learned how to apply color to a toolbar component using the following code snippet:

<mat-toolbar color="primary">
<span>My Application</span>
</mat-toolbar>

However, when trying to customize my sidenav component, I tried to use color="primary" and nothing happens:

<mat-sidenav-container class="example-container">
<mat-sidenav color="primary" #sidenav mode="side" [(opened)]="opened" (opened)="events.push('open!')"
(closed)="events.push('close!')">
Sidenav content
</mat-sidenav>

    <mat-sidenav-content>
      <p><mat-checkbox [(ngModel)]="opened">sidenav.opened</mat-checkbox></p>
      <p><button mat-button (click)="sidenav.toggle()">sidenav.toggle()</button></p>
      <p>Events:</p>
      <div class="example-events">
        @for (e of events; track e) {
          <div>{{e}}</div>
        }
      </div>
    </mat-sidenav-content>

</mat-sidenav-container>

Could someone help me? I would like to know why in some components the color attribute works and in others it doesn’t.

I tried to customize my Angular sidenav component using the color attribute, but it didn’t work.

Tags:

2

Answers


  1. 0

    use ng-deep in style files. All style apply only for html for current component, for styling child components need to use ng-deep or turn off ViewEncapsulation.None in @Component properties

    Login or Signup to reply.
  2. 0

    The mat-sidenav does not have a color input property, but you can do this using custom styling in the global css file (styles.scss). Here I use mat.get-theme-color which can be used to get a color from the theme.

    Source Code Reference

    ### Reading tonal palette colors

To read a
[tonal palette color](https://m3.material.io/styles/color/system/how-the-system-works#3ce9da92-a118-4692-8b2c-c5c52a413fa6)
from the theme, use the `get-theme-color` function with three arguments:

| Argument   | Description                                                                                                                                                                                                                                                        |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `$theme`   | The M3 theme to read from.                                                                                                                                                                                                                                         |
| `$palette` | The name of the palette to read from. This can be any of the standard M3 palettes:<ul><li>`primary`</li><li>`secondary`</li><li>`tertiary`</li><li>`error`</li><li>`neutral`</li><li>`neutral-variant`</li></ul>                                                   |
| `$hue`     | The hue number to read within the palette. This can be any of the standard hues:<ul><li>`0`</li><li>`10`</li><li>`20`</li><li>`30`</li><li>`40`</li><li>`50`</li><li>`60`</li><li>`70`</li><li>`80`</li><li>`90`</li><li>`95`</li><li>`99`</li><li>`100`</li></ul> |

    styles.scss

    @use '@angular/material' as mat;
@use 'sass:list';
@use 'sass:map';
@use 'sass:math';
@use 'sass:meta';

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

body {
  @include mat.all-component-themes($theme);
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 30px;
  height: 100%;
}

html {
  height: 100%;
}

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

.mat-sidenav {
  background-color: mat.get-theme-color($theme, primary) !important;
}

    Stackblitz Demo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search