如何在角度材料 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 文件中的一个 sn-p：

@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);
}

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

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

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

我有一个 div 包装我的整个应用程序，使用相同的 ngClass 方法来应用 darkTheme 类或不应用 isDarkTheme 变量的值。这可以一次性处理我整个应用程序中的所有材质感知元素，我只需在需要的特定非材质元素上使用light-colors 和dark-colors。我可能可以将这些结合起来，但现在我将保持原样。

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

• 默认
• 打火机
• 较暗

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

来自“前景”调色板（我上面的代码中的$light-foreground-palette 和$dark-foreground-palette）：

• 基础
• 分频器
• 分频器
• 已禁用
• 禁用按钮
• 禁用文本
• 提示文本
• 辅助文本
• 图标
• 图标
• 文字
• 滑块关闭
• 滑块关闭活动

来自“背景”调色板（我上面的代码中的$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% 的情况，所以如果有更好的方法，请告诉我...

Answer 2

我知道这对聚会来说太晚了，但在终于找到了一个干净的方法之后不想拉一个 DenverCoder9。

首先，转到 angular material2 github 上的 this link 并找出您的主题使用的调色板。 （该链接指向版本 6，因此请确保将标签更改为您使用的任何版本。）

然后在您的项目中的某处创建一个variables.scss 文件来存储您的主题的调色板引用（下面的示例使用靛蓝粉色主题的调色板）：

/* variables.scss */
@import "~@angular/material/theming";

$primaryPalette: mat-palette($mat-indigo);
$accentPalette:  mat-palette($mat-pink, A200, A100, A400);

// the default warn palette is red, so use that if the theme doesn't define one
$warnPalette:    mat-palette($mat-red);

然后您可以将variables.scss 文件包含到您的样式表中，并使用mat-color(<palette>) 为您的类获取颜色。

/* my-component.scss */
@import "~@angular/material/theming";
@import 'variables.scss';

.my-primary-text {
    color: mat-color($primaryPalette);
}

.my-accent-text {
    color: mat-color($accentPalette);
}

使用此方法，您仍然可以使用预构建的主题。使用他们发布的文档重新创建主题可能会更干净，但现在我对此很满意。

希望这可以为下一个人节省很多痛苦和痛苦。

更新：重新定义默认主题以防止 OhGodTheyChangedColorsThisRelease

谁知道角材质何时会改变它们的主题颜色，所以重新创建默认它们可能是个好主意。

因此，在帖子的前一部分的基础上，添加 mat-light-theme/mat-dark-theme 混合以重新定义新主题。

/* variables.scss */
@import "~@angular/material/theming";

$primaryPalette: mat-palette($mat-indigo);
$accentPalette:  mat-palette($mat-pink, A200, A100, A400);

// the default warn palette is red, so use that if the theme doesn't define one
$warnPalette:    mat-palette($mat-red);

// re-define the indigo-pink theme
$defaultTheme: mat-light-theme($primaryPalette, $accentPalette, $warnPalette);

然后在您的主根目录styles.scss 中为您的应用程序，

/* styles.scss */
@import '~@angular/material/theming';
@import './scss/variables.scss';

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

确保将<link href=> 放入默认样式表的index.html。

太棒了！现在，如果您更新 Angular 材质并且它们改变了颜色，那您很好！您可以通过使用 variables.scss 中的调色板来更新整个应用程序的颜色。

Answer 3

您可以在 HTML 元素上使用 class="mat-primary" 和 class="mat-accent" 来获取主题的主色和强调色。

Answer 4

我创建了一个简单的 mixin 来解决这个问题。

• 根据https://material.angular.io/guide/theming#multiple-themes 创建您的主题，在我的例子中：我有三个

$theme: mat-light-theme((color:(primary: $primary,accent: $accent,warn: $warn)));  
$pv-theme: mat-light-theme((color:(primary: $pv-primary,accent: $pv-accent,warn: $pv-warn)));  
$avg-theme: mat-light-theme((color:(primary: $avg-primary,accent: $avg-accent,warn: $avg-warn)));  

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

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

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

• 创建一个mixin：

@mixin theme($property: null, $key: null) {
  & {
    #{$property}: mat-color(map_get($theme, $key));
  }

  .avg & {
    #{$property}: mat-color(map_get($avg-theme, $key));
  }

  .pv & {
    #{$property}: mat-color(map_get($pv-theme, $key));
  }
}

• 像这样使用它：

footer .container {
  @include theme(background-color, primary);
}

Answer 5

为了从当前应用的主题中获取任何颜色，例如primary 试试这个，$theme 是你的主题变量名

$primary: map-get($theme, primary);