平行的两个材料主题

Question

是否可以在同一个应用上同时拥有两个 Material Design 主题？

这是我的用例： 大多数应用程序都有 ma​​t-light-theme，但我希望标题和侧导航有 ma​​t-dark-theme，包括位于内部的所有组件他们。

我当然可以通过手动覆盖类来做到这一点，但我希望有一些更优雅的解决方案。

这是我尝试过的（没有成功）：

@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

我实际上已经接近解决方案，问题是应该在 drawer-container 类上定义深色材质主题，而不是在 drawer 上。 标题也是如此 - 必须将深色主题应用于直接父级。

希望这对某人有所帮助。

更新： 这是link to the StackBlitz 解决方案。