How to style sidenav
Styles from thematerial/sidenav
package can be customized using the sidenav-overrides
mixin. This mixin accepts a set of tokens that control how the components will look, either for the entire app or under a specific selector. For example: @use '@angular/material' as mat;
// Customize the entire app. Change :root to your selector if you want to scope the styles.
:root {
@include mat.sidenav-overrides((
container-background-color: orange,
container-text-color: red,
));
}
Tokens supported by sidenav-overrides
Name | Type | Based on system token |
---|---|---|
container-shape | Base | None |
container-elevation-shadow | Base | None |
container-width | Base | None |
container-divider-color | Base | None |
container-background-color | Color | --mat-sys-surface |
container-text-color | Color | --mat-sys-on-surface-variant |
content-background-color | Color | --mat-sys-background |
content-text-color | Color | --mat-sys-on-background |
scrim-color | Color | None |