CODEWITHSUNDEEP
angular-material2
Wes
Wes

Reputation: 7077

Theme angular material pagenator background colour

Hi I'm trying to change the background of a mat-pagenator control in an angular project.

However it appears that the pagenator always appears white. Regardless of the background-color I set in the application.

styles.scss

@import '~@angular/material/theming';
@include mat-core();
$sample-material-app-primary: mat-palette($mat-indigo);
$sample-material-app-accent: mat-palette($mat-pink, A200, A100, A400);
$sample-material-app-warn: mat-palette($mat-red);
$sample-material-app-theme: mat-light-theme($sample-material-app-primary, $sample-material-app-accent, $sample-material-app-warn);
$background: map-get($sample-material-app-theme, background);
$background: map_merge($background, (background: #FF1010));
$theme: map_merge($sample-material-app-theme, (background: $background));
@include angular-material-theme($theme);
@include mat-paginator-theme($theme);
//Just so we can see a background color
html, body { height: 100%; background-color: bisque }

app.component.html

<mat-form-field>
  List length:
  <input matInput [(ngModel)]="length">
</mat-form-field>

<mat-form-field>
  Page size:
  <input matInput [(ngModel)]="pageSize">
</mat-form-field>
<mat-form-field>
  Page size options:
  <input matInput
         [ngModel]="pageSizeOptions"
         (ngModelChange)="setPageSizeOptions($event)">
</mat-form-field>

<mat-paginator [length]="length"
              [pageSize]="pageSize"
              [pageSizeOptions]="pageSizeOptions"
              (page)="pageEvent = $event">
</mat-paginator>

<div *ngIf="pageEvent">
  <h5>Page Change Event Properties</h5>
  <div>List length: {{pageEvent.length}}</div>
  <div>Page size: {{pageEvent.pageSize}}</div>
  <div>Page index: {{pageEvent.pageIndex}}</div>
</div>

result: Example showing that background is set to white regardless

the desired result is to set a color for the background of this component(and some others)

The way I'm trying to set the background is based on Angular Material2 theming - how to set app background?

Upvotes: 0

Views: 1646

Answers (1)

Wes
Wes

Reputation: 7077

It appears that <mat-paginator> inherits its background colour from card not from the background property.

The same seems to be true for <mat-table> so to set the default styles of these the following worked: (note this is an ugly colour just to prove the colour works)

@import '~@angular/material/theming';
@include mat-core();
$sample-material-app-primary: mat-palette($mat-indigo);
$sample-material-app-accent: mat-palette($mat-pink, A200, A100, A400);
$sample-material-app-warn: mat-palette($mat-red);
$sample-material-app-theme: mat-light-theme($sample-material-app-primary, $sample-material-app-accent, $sample-material-app-warn);
$background: map-get($sample-material-app-theme, background);
$bg-color: #FF1010;
$background: map_merge($background, (background: $bg-color, card: $bg-color, dialog:$bg-color));
$theme: map_merge($sample-material-app-theme, (background: $background));
@include angular-material-theme($theme);
@include mat-paginator-theme($theme);
//Just so we can see a background color
html, body { height: 100%; background-color: bisque }

Note I also added dialog into this as it was also set to white and its likely that it needs the same background colour.

Upvotes: 1

Related Questions