我正在构建一个具有多个主题和角度材质设计的应用程序2.我创建了多个主题并且它的工作非常棒。 使用此指南：Angular Material design theme
但问题是如果用户选择“绿色主题”为例。然后我想以绿色显示他/她的名字。但是，如何在我的组件样式中将当前选定的主题设置为“green”，然后在我的用户名类中使用该主变量来更改其颜色
答案 0 :(得分：26)
我不确定这是否是“正确”的方法，但它确实有效，所以我现在正在使用它。如果有更好的方法，我会适应。我的目标是能够根据当前应用的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);
}
在我的“主题”服务中（尽管你可以在任何服务中完成它，只要它可以全局使用，或者至少在你需要它的任何地方），我定义了一个简单的布尔变量isDarkTheme。我使用它来控制显示，具体取决于用户是否选择了“黑暗”主题。
然后，无论我需要什么，我都使用ngClass动态应用类，具体取决于全局isDarkTheme变量的值：
<div [ngClass]="{'light-colors' : !svc.isDarkTheme,'dark-colors' : svc.isDarkTheme}">
...my content...
</div>
我有一个div使用相同的ngClass方法包装我的整个应用程序，要么应用darkTheme类，要么取决于isDarkTheme变量的值。这样就可以一次性处理我整个应用程序中的所有Material-aware元素，而我只需要在需要的特定非Material元素上使用light-colors和dark-colors。我可能会把这些结合起来，但是现在我把事情保持原样。
为了完整性，以下是您可以从不同调色板中获取的元素列表：
在我的代码中的“主要”调色板（$primary和$dark-p）中：
您还可以为$accent和$warn调色板获取相同的三种颜色值。
来自我前面代码中的“前景”调板（$light-foreground-palette和$dark-foreground-palette）：
在我的代码中的“背景”调色板（$light-background-palette和$dark-background-palette）中：
以下是我将这些内容放在一起的来源：
我会自由地承认只了解这里发生的事情的80％，所以如果有更好的方法，请告诉我......
答案 1 :(得分：9)
我知道这对派对来说已经很晚了，但是在最终想出一个干净的方法之后不想拉一个DenverCoder9。
首先，转到angular material2 github上的this link，找出你的主题使用的调色板。 （该链接指向版本6，因此请确保将标记更改为您正在使用的任何版本。）
然后在项目中的某个地方创建一个variables.scss文件来存储主题的调色板参考（以下示例使用调色板作为indigo-pink主题）：
/* 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);
}
使用此方法，您仍然可以使用预先构建的主题。使用他们发布的文档重新创建主题可能更加清晰，但是现在我对此很满意。
希望这可以为下一个人带来很多痛苦和痛苦。
所以谁知道什么时候角度材料可能会改变他们的主题颜色，所以重新创建它们可能是一个好主意。
在帖子的前一部分的基础上，添加mat-light-theme / mat-dark-theme mixins以重新定义新主题。
/* 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
$myDefaultTheme: mat-light-theme($primaryDefault, $accentDefault, $warnDefault);
然后在您的应用的主根styles.scss中
/* styles.scss */
@import '~@angular/material/theming';
@import './scss/variables.scss';
@include angular-material-theme($defaultTheme);
请务必将<link href=>中的index.html放入默认样式表。
大！现在，如果您更新了角度材料，并且他们更改了颜色，那就更好了！您可以在variables.scss中使用调色板更新应用程序中的颜色。
答案 2 :(得分：2)
您可以在HTML元素上使用class="mat-primary"和class="mat-accent"来获取主题的主色和强调色。
答案 3 :(得分：0)
为了从当前应用的主题中获取任何颜色，例如主要尝试一下，其中 $ theme 是您的主题变量名称
$primary: map-get($theme, primary);
答案 4 :(得分：0)
我创建了一个简单的mixin来解决此问题。
$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 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);
}