This demo implements a dark and light Angular theme.

When a theme is selected the class name for the current theme set on the body element with an observable like this (app.component.html):

[class]="s.OS.S.theme.obs | async"

When a new theme is selected the current theme is removed from the overlay container and the new class name is added to the overlay container.

This is all done within app.component.ts. These snippets remove and add the class name from the overlay container:

Remove Theme Class from Overlay Container

overlayContainerClasses.remove(...themeClassesToRemove);

Add Theme Class from Overlay Container

this.overlayContainer.getContainerElement().classList.add(themeClass);

In general it works except when the dark theme is selected it looks like the overlay container stays in place, it is black and it covers the whole viewport. Clicking within the viewport makes it disappear. That is just an attempt by me to describe whats happening.

Any ideas on how to fix this?

Theme Implementation Within styles.scss

@use '@angular/material' as mat;
@include mat.core();

$my-theme-primary: mat.define-palette(mat.$indigo-palette, 500, 200, 800);
$my-theme-accent: mat.define-palette(mat.$cyan-palette);
$my-theme-warn: mat.define-palette(mat.$deep-orange-palette, A200);

$light-theme: mat.define-light-theme(
  (
    color: (
      primary: $my-theme-primary,
      accent: $my-theme-accent,
      warn: $my-theme-warn,
    ),
  )
);

// ====================================
// Make sure to have a dark background
// Dropdowns will blend in with light
// backgrounds.
// ====================================
$dark-theme: mat.define-dark-theme(
  (
    color: (
      primary: $my-theme-primary,
      accent: $my-theme-accent,
      warn: $my-theme-warn,
    ),
  )
);

// =====================================
// always include only once per project
// =====================================

.dark-theme {
  // use our theme with angular-material-theme mixin
  //  @include angular-material-theme($dark-theme);
  //  @include mat.core-theme($light-theme);
  @include mat.all-component-themes($dark-theme);
  background-color: black;
}
.light-theme {
  // use our theme with angular-material-theme mixin
  //  @include angular-material-theme($dark-theme);
  //  @include mat.core-theme($light-theme);
  @include mat.all-component-themes($light-theme);
}

html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Roboto, 'Helvetica Neue', sans-serif;
}

CodePudding user response：

Found some issues in the theme implementation. Take a look at the update code: https://stackblitz.com/edit/angular-xvxuhg-acrvsa?file=src/styles.scss,src/app/app.component.html,src/app/app.component.ts

Documentation - https://v14.material.angular.io/guide/theming

1. styles.scss - dark theme is implemented using @include mat.all-component-colors, not themes.
2. app.component.html - Apply the mat-app-background CSS class to your main content root element (typically body).

   https://material.angular.io/guide/theming#application-background-color

3. app.component.ts - Instead of using an observable async pipe to read the theme class. @HostBinding is a lot more straight forward.

   @HostBinding('class')
   themeMode: string = '';