在Angular 2材料中，我可以在运行时切换主题时消耗SCSS变量，例如$ primary-dark

Question

特别是

我希望一旦实现。.在任何组件SCSS文件中都有多个主题和参考$primary-dark。

将通过主题为主题的Angular Material App

实现多个主题

i是不是寻找使用指令的解决方案。

我被告知不可能。

Answer 1

*由于注释*

而更新了

如果您想即时交换它们，则必须定义site.scss文件中的所有不同主题。

@import '~@angular/material/theming';
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// **Be sure that you only ever include this mixin once!**
@include mat-core();
// Define the default theme (same as the example above).
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);
// Include the default theme styles.
@include angular-material-theme($candy-app-theme);
// Define an alternate dark theme.
$dark-primary: mat-palette($mat-blue-grey);
$dark-accent:  mat-palette($mat-amber, A200, A100, A400);
$dark-warn:    mat-palette($mat-deep-orange);
$dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
// Include the alternative theme styles inside of a block with a CSS class. You can make this
// CSS class whatever you want. In this example, any component inside of an element with
// `.unicorn-dark-theme` will be affected by this alternate dark theme instead of the default theme.
.unicorn-dark-theme {
  @include angular-material-theme($dark-theme);
}

您必须将.unicorn-dark-theme类添加到要以主题为主题的任何组件中。

我实际上还没有完成动态主题，但我希望您能够将ng-class放在根级别上并根据需要切换。

有一个标题为主题链接中的多个主题的部分，@ttugates最初发布了

另外，如果您单击该链接右上角的小油漆桶图标，则将看到4个不同的主题选项。

如果您想使用一些演示代码，请在本地克隆材料2 repo，请安装依赖项，然后运行npm run demo-app。玩一些现场示例的好方法。

*原始答案 *

我们有一个site.scss文件，该文件声明了我们所有的变量，例如

$grey-color: mat-color(mat-palette($mat-grey));

然后，我们将site.scss文件导入到我们需要使用的任何其他.scss文件中。

@import '../../../styles/site.scss';
.set-for-deletion {
  text-decoration: line-through;
  color: $grey-color;
}

我们正在为构建使用Angular-CLI，因此我们在.angular-cli.json文件中包括您提供的链接中的样式文件。

。

如果您使用的是Angular CLI，则内置了将Sass汇编为CSS的支持；您只需要在Angular-cli.json中指向主题文件的"样式"列表中添加新条目（例如Unicorn-app-theme.scss）。