angular - 如何在 Angular Material 2 中获取当前应用主题的原色或强调色

Question

我正在使用 Angular Material Design 2 构建一个具有多个主题的应用程序。我创建了多个主题并且它运行得非常好。使用此指南:Angular Material design theme

但问题是，如果用户选择“绿色主题”，例如。然后我想用绿色显示他/她的名字等等。但是我怎样才能在我的组件样式中获得当前选择的主题“绿色”，然后在我的用户名类中使用该主要变量来改变它的颜色

Answer 1

我不确定这是否是“正确”的方法，但它确实有效，所以我暂时使用它。如果有更好的方法，我会适应。我的目标是能够根据当前应用的 Material 主题使用不同的颜色设置非 Material 元素(例如标准 DIV、SPAN 等)的样式。它采用了 Material 2 和 Angular 2 元素的组合才能使其全部正常工作。

这是我做的:我的自定义主题文件如下所示:

@import '~@angular/material/_theming.scss';

@include mat-core();

// default theme:
$primary: mat-palette($mat-blue,800);
$accent: mat-palette($mat-teal);
$theme: mat-light-theme($primary, $accent);

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

// "dark" theme
$dark-p: mat-palette($mat-blue-grey, 500);
$dark-a: mat-palette($mat-blue-grey,900);
$dark-t: mat-dark-theme($dark-p, $dark-a);

.darkTheme {
  @include angular-material-theme($dark-t);
}

我的应用程序 scss 文件中的一个片段:

@import '../../themes/main-theme';  //  <-- the theme file shown above

//default palette forground/background:
$light-foreground-palette: map-get($theme, foreground);
$light-background-palette: map-get($theme, background);

//dark palette forground/background:
$dark-foreground-palette: map-get($dark-t, foreground);
$dark-background-palette: map-get($dark-t, background);

.light-colors{
    background-color : mat-color($primary, default);
    color: mat-color($light-foreground-palette, text);
}
.dark-colors{
    background-color : mat-color($dark-p, default);
    color: mat-color($dark-foreground-palette, text);
}

在我的“主题”服务中(尽管您可以在任何服务中执行此操作，只要它在全局可用，或者至少在您需要的任何地方可用)，我定义了一个简单的 bool 变量 isDarkTheme .我用它来根据用户是否选择了“深色”主题来控制显示。

然后无论我需要什么，我都使用 ngClass 来动态应用类，这取决于全局 isDarkTheme 的值。变量:

<div [ngClass]="{'light-colors' : !svc.isDarkTheme,'dark-colors' : svc.isDarkTheme}">
...my content...
</div>

我有一个 div 使用相同的 ngClass 包装我的整个应用程序应用 darkTheme 的方法类与否取决于 isDarkTheme 的值多变的。这一次性处理了我整个应用程序中的所有 Material-aware 元素，我只使用 light-colors和 dark-colors在我需要的特定非 Material 元素上。我可能可以将这些结合起来，但现在我让事情保持原样。

为了完整起见，以下是您可以从不同调色板获得的元素列表:从“主”调色板(我上面的代码中的 $primary 和 $dark-p):

• 默认
• 打火机
• 较暗

您还可以获得 $accent 的这三个相同的颜色值和 $warn调色板。

从“前景”调色板(我上面的代码中的 $light-foreground-palette 和 $dark-foreground-palette):

• 基地
• 分隔线
• 分隔线
• 已禁用
• 禁用按钮
• 禁用文本
• 提示文字
• 辅助文本
• 图标
• 图标
• 正文
• 滑动关闭
• slider 关闭

从“背景”调色板(我上面的代码中的 $light-background-palette 和 $dark-background-palette):

• 状态栏
• 应用栏
• 背景
• 悬停
• 名片
• 对话
• 禁用按钮
• 凸起按钮
• 聚焦按钮
• 选中按钮
• 选中的禁用按钮
• 禁用按钮切换

以下是我用来整理它们的来源:

• https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1
• How to change font color of primary palette in Angular Material2?
• https://material.angular.io/guide/theming-your-components
• Material 中的 _theming.scss 文件:https://github.com/angular/material2/blob/master/src/lib/core/theming/_theming.scss

我承认我只理解这里发生的事情的大约 80%，所以如果有更好的方法，请告诉我...