Question

我正在尝试为应用添加深色主题：

所以我有两个像这样的主题：

$gok-app-accent: mat-palette($mat-deep-purple);
$gok-app-warn: mat-palette($mat-amber);
$gok-app-dark-theme: mat-dark-theme(
  (
    color: (
      accent: $gok-app-accent,
      primary: $gok-app-primary,
      warn: $gok-app-warn,
    ),
  )
);

我在styles.scss中添加了2个类：

.light-theme {
  @include angular-material-theme($gok-app-light-theme);
  @include all-components-theme($gok-app-light-theme);
}

.dark-theme {
  @include angular-material-theme($gok-app-dark-theme);
  @include all-components-theme($gok-app-dark-theme);
}

我想测试我的类是否正常工作，但是此代码不起作用！

  ngOnInit() {
    this.overlayContainer.getContainerElement().classList.add("dark-theme");
  }

顺便说一句，我的mixins正常工作，当我将深色主题“ includes”放入它时可以正常工作

你们有什么想法吗？预先感谢！

Answer 1

最后通过另一种方法成功改变主题：

  @HostBinding("class") componentCssClass: string;

    ...
  ngOnInit() {
     this.componentCssClass = "dark-theme";
  }

角材料主题不会随着overlaycontainer改变

1 个答案: