Angular material Sass 通过全局 scss 文件上的 map-get 和深色主题动态获取样式

Question

我在 Angular 应用程序中实现了深色主题。它通过服务完成，并在文档正文中添加或删除 class。

this.renderer.addClass(document.body, 'color-scheme-dark');

Styles.scss 根据 class:

包含 material 主题

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

.color-scheme-dark {
  @include angular-material-theme($dark-theme);
}

一切正常，angular 仅当我通过深色方案 class 时才设置深色主题。但是，问题是我有全局样式 scss 文件夹，它根据浅色主题应用样式：

.app-hr {
  color: map-get($app-foreground, border);
}

但如果 class 是暗的，则正确的结果是取 (app-dark-doreground,border)。我试图做类似下面的代码，但失败了：

.app-hr {
  color: map-get($app-foreground, border);
}

.color-scheme-dark {
  color: map-get($app-dark-foreground, border);

}

所以我有几个 Scss 文件可以从调色板获取颜色，但我无法通过我添加的 class 动态更改它们。接下来我该怎么做才能改变它们？谢谢。

Answer 1

这就是我解决这个问题的方法。在 global-styles.scss 中，我用变量 $theme:

做了一个 mixin

@mixin toolbar-style($theme) {
  mat-toolbar {
    background-color: map-get($theme, toolbar-background)
  }
}

并且在 styles.scss 中，我根据 class.

添加了具有正确主题的相关 mixin

@include toolbar-style($app-foreground);

.color-scheme-dark {
  @include toolbar-style($mat-dark-theme-foreground);
}

Angular material Sass get styles dynamically via map-get and dark theme on global scss files