'Rendering Overlay Containers when theming Angular Material?

According to this tutorial we should be able to add the class needed to render the overlay container that backs Angular Material Select, Snackbar, etc. like this:

  themeClass:string = 'my-theme'
  ngOnInit(): void {    
    // remove old theme class and add new theme class
    // we're removing any css class that contains '-theme' string but your theme classes can follow any pattern
    const overlayContainerClasses = this.overlayContainer.getContainerElement().classList;
    const themeClassesToRemove = Array.from(overlayContainerClasses).filter((item: string) => item.includes('-theme'));
    if (themeClassesToRemove.length) {
       overlayContainerClasses.remove(...themeClassesToRemove);
    }
    overlayContainerClasses.add(this.themeClass);
  }

However I'm not getting any love from the Material Select component. I've created a Github Repository with the source code.

To reproduce the result these are the steps:

Steps to reproduce:
1.git clone [email protected]:fireflysemantics/angular-theming-test.git
2. cd angular-theming-test
3. npm i
4. ng serve -o

The app.component.html template looks like this:

<h2>Mat Select here</h2>
<mat-form-field appearance="fill">
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings" multiple>
    <mat-select-trigger>
      {{toppings.value ? toppings.value[0] : ''}}
      <span *ngIf="toppings.value?.length > 1" class="example-additional-selection">
        (+{{toppings.value.length - 1}} {{toppings.value?.length === 2 ? 'other' : 'others'}})
      </span>
    </mat-select-trigger>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

<section>
  <div class="example-label">Basic</div>
  <div class="example-button-row">
    <button mat-button>Basic</button>
    <button mat-button color="primary">Primary</button>
    <button mat-button color="accent">Accent</button>
    <button mat-button color="warn">Warn</button>
    <button mat-button disabled>Disabled</button>
    <a mat-button href="https://www.google.com/" target="_blank">Link</a>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class="example-label">Raised</div>
  <div class="example-button-row">
    <button mat-raised-button>Basic</button>
    <button mat-raised-button color="primary">Primary</button>
    <button mat-raised-button color="accent">Accent</button>
    <button mat-raised-button color="warn">Warn</button>
    <button mat-raised-button disabled>Disabled</button>
    <a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
  </div>
</section>

The theme (theme.scss) is next to styles.scss and it is implemented like this:

// define 3 theme color
// mat-palette accepts $palette-name, main, lighter and darker variants
$my-theme-primary: mat-palette($mat-indigo, 700, 300, 900);
$my-theme-accent: mat-palette($mat-light-blue);
$my-theme-warn: mat-palette($mat-deep-orange, A200);

// create theme (use mat-dark-theme for themes with dark backgrounds)
$my-theme: mat-dark-theme(
    $my-theme-primary,
    $my-theme-accent,
    $my-theme-warn
);

And imported into styles.scss with the following code:

@import '~@angular/material/theming';

// always include only once per project
@include mat-core();

// import our custom theme
@import 'theme.scss';

// specify theme class eg: <body class="my-theme"> ... </body>
.my-theme {
  
  // use our theme with angular-material-theme mixin
  @include angular-material-theme($my-theme);
}/* You can add global styles to this file, and also import other style files */

Any ideas on how to fix the overlay code so that the select will render?

[I also asked about this on the Angular Material Repository as it seems like it's a bit of a tricky thing to solve.

https://github.com/angular/components/issues/24858

I'm adding a few screenshots of what I get in both Chrome and Firefox:

enter image description here

enter image description here

javascriptcssangularsassangular-material


Solution 1:[1]

Just add the dark background to your app and you can see the select box. It changes to white as soon as you add dark mode and this doesn't go along with white background. Tested in Firefox and Chrome. See screenshots.

enter image description here

enter image description here

Just wrap your code in appcomponent.html in a div and add the mat-app-background.

<div class="mat-app-background">
<YOUR CODE HERE>
</div>

Hope this helps!

Solution 2:[2]

Couldn't get your repo working so I created a new project with your code. Works perfectly fine as you can see in the screenshot.

Select dark mode

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Chris_Continues
Solution 2 Chris_Continues

Related Questions