Two material themes in parallel

Question

Is it possible to have two material design themes on the same app in parallel?

This is my use case: Majority of the application has mat-light-theme, but I would like to have header and side nav to have mat-dark-theme, including all the components that sit inside them.

I can do this by manually overriding classes of course, but I am hoping for some more elegant solution.

This is what I tried (without success):

@include angular-material-theme($app-light-theme);

.drawer {
  // background: $primary-dark;
  // color: $cl-text-fg-dark;

  @include angular-material-theme($app-dark-theme);
}

Answer 1

I was actually close to the solution, problem was that dark material theme was supposed to be defined on the drawer-container class, not drawer. The same thing goes for the header - the dark theme has to be applied to a direct parent.

Hope this helps someone.

UPDATE: Here is the link to the StackBlitz solution.