mat-theme is not working for mat-select options and mat-datepicker

Question

I'm currently working in an Angular 9 app with Angular Material and Custom Themes.

Everything works except for the options of the mat select options and mat datepicker

Here is my scss theme code

@import '~@angular/material/theming';
@include mat-core();
$orange-primary: mat-palette($mat-orange, A400);
$orange-accent:  mat-palette($mat-orange, A700, A200, 900);
$orange-warn:    mat-palette($mat-red, 300);
$orange-theme: mat-dark-theme($orange-primary, $orange-accent, $orange-warn);

.light-theme {

  .orange {
    @include angular-material-theme($orange-theme);
    @include mat-menu-theme($orange-theme);
    @include mat-select-theme($orange-theme);
  }
}

Other components are working whith that theme, but mat-select options and mat-datepicker looks like this:

is there any way to aply the custom theme in those mat components ?

user_5429428 · Answer

This is little bit tricky, you need to bind a click function around your select or any overlay component, which will add child class to child element as this is not available until you click on these overlay element.

onMatSelectClick(){
    this.overlayContainer.getContainerElement().getElementsByClassName('cdk-overlay-connected-position-bounding-box')[0].classList.add('orange');
}

Stackblitz with nested class

user_14548083 · Answer

You could use the panelClass input property for both the datepicker and select like this:

mat-theme is not working for mat-select options and mat-datepicker

2 Answers