Angular 角度材质2针对不同的构建/环境使用不同的主题（颜色）

我得到了一个Angular6应用程序，它使用CLI和material2定制主题。现在，对于另一个客户，我想使用相同的应用程序，但颜色不同。我该怎么做？我不想维护第二个代码库，所以它必须与构建和/或环境有关，我想是这样的吗

在

style.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 palettes for your theme using the Material Design 
palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a 
default, lighter, and darker
// hue.
$app-primary: mat-palette($mat-blue, 500);
$app-accent: mat-palette($mat-blue, 900);

// The warn palette is optional (defaults to red).
$app-warn: mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each 
component
// that you are using.
@include angular-material-theme($app-theme);

您可以采取的一种方法是为此使用基本的CSS类。在主题文件中，定义不同的主题：

@import '~@angular/material/theming';

@include mat-core();

// Define a default theme
$light-default-primary: mat-palette($mat-blue);
$light-default-accent:  mat-palette($mat-blue-grey, A200, A100, A400);
$light-default-warn:    mat-palette($mat-red);
$light-default-theme:   mat-light-theme($light-default-primary, $light-default-accent, $light-default-warn);
@include angular-material-theme($light-default-theme);

.light-blue-theme {

  $light-blue-primary: mat-palette($mat-blue);
  $light-blue-accent:  mat-palette($mat-blue-grey, A200, A100, A400);
  $light-blue-warn:    mat-palette($mat-red);
  $light-blue-theme:   mat-light-theme($light-blue-primary, $light-blue-accent, $light-blue-warn);

  @include angular-material-theme($light-blue-theme);
}

.dark-theme {

  $dark-primary: mat-palette($mat-cyan);
  $dark-accent:  mat-palette($mat-blue-grey, A200, A100, A400);
  $dark-warn:    mat-palette($mat-deep-orange);
  $dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

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

在
evnironments.ts
文件中，定义客户：（我想每个客户都需要单独的环境）

在组件中，您可以设置当前客户：

export class AppComponent { 
  public clientName: string = this.env.client.clientName; // imported from environments.ts
...

然后在模板中，可以将相关类添加到主容器中：

<div [class.light-blue-theme]="clientName === 'xxx'" [class.dark-theme]="clientName === 'yyy'">
  ...
</div>


...
您可以采取的一种方法是为此使用基本CSS类。在主题文件中，定义不同的主题：

@import '~@angular/material/theming';

@include mat-core();

// Define a default theme
$light-default-primary: mat-palette($mat-blue);
$light-default-accent:  mat-palette($mat-blue-grey, A200, A100, A400);
$light-default-warn:    mat-palette($mat-red);
$light-default-theme:   mat-light-theme($light-default-primary, $light-default-accent, $light-default-warn);
@include angular-material-theme($light-default-theme);

.light-blue-theme {

  $light-blue-primary: mat-palette($mat-blue);
  $light-blue-accent:  mat-palette($mat-blue-grey, A200, A100, A400);
  $light-blue-warn:    mat-palette($mat-red);
  $light-blue-theme:   mat-light-theme($light-blue-primary, $light-blue-accent, $light-blue-warn);

  @include angular-material-theme($light-blue-theme);
}

.dark-theme {

  $dark-primary: mat-palette($mat-cyan);
  $dark-accent:  mat-palette($mat-blue-grey, A200, A100, A400);
  $dark-warn:    mat-palette($mat-deep-orange);
  $dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

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

在
evnironments.ts
文件中，定义客户：（我想每个客户都需要单独的环境）

在组件中，您可以设置当前客户：

export class AppComponent { 
  public clientName: string = this.env.client.clientName; // imported from environments.ts
...

然后在模板中，可以将相关类添加到主容器中：

<div [class.light-blue-theme]="clientName === 'xxx'" [class.dark-theme]="clientName === 'yyy'">
  ...
</div>


...
如果您使用的是angular 6，则可以使用
angular.json
中的
fileReplacements
配置部分。
使用此选项，只有在为特定环境构建时，才可以使用customer1.theme.scss文件替换文件theme.scss

以下是一个例子：

{
  "projects": {
    "myproject": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "projects/customer/src/environments/environment.ts",
                  "with": "projects/customer/src/environments/environment.prod.ts"
                },
                {
                  "replace": "projects/customer/src/themes/theme.scss",
                  "with": "projects/customer/src/themes/theme.prod.scss"
                }
              ]
            }
          }
        }
      }
    }
  }
}

如果您使用的是angular 6，则可以使用
angular.json
中的
fileReplacements
配置部分。
使用此选项，只有在为特定环境构建时，才可以使用customer1.theme.scss文件替换文件theme.scss

以下是一个例子：

{
  "projects": {
    "myproject": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "projects/customer/src/environments/environment.ts",
                  "with": "projects/customer/src/environments/environment.prod.ts"
                },
                {
                  "replace": "projects/customer/src/themes/theme.scss",
                  "with": "projects/customer/src/themes/theme.prod.scss"
                }
              ]
            }
          }
        }
      }
    }
  }
}

谢谢，我有个问题。我在某处使用了以下行：
背景色：mat color（$app primary）
。这显然行不通。有什么想法吗？不是100%确定，但我认为应该仍然有效，因为它将使用当前活动主题的主颜色。编译错误将无法识别变量
$app primary
，您可以尝试添加默认主题（请参见编辑）。否则，您可能需要考虑不同的方法。一个可能的解决方案是：然而，这要求您在每个组件中创建一个mixin文件/函数。谢谢，我有一个问题。我在某处使用了以下行：
背景色：mat color（$app primary）
。这显然行不通。有什么想法吗？不是100%确定，但我认为应该仍然有效，因为它将使用当前活动主题的主颜色。编译错误将无法识别变量
$app primary
，您可以尝试添加默认主题（请参见编辑）。否则，您可能需要考虑不同的方法。一个可能的解决方案是：然而，这要求您在每个组件中创建一个mixin文件/函数。这看起来很有希望！你能给我举个例子吗？我已经在anwserWow中举了一个例子，这正是我所需要的。但是，6.0.*中的一个bug阻止替换html和scss文件。似乎已在6.1中修复。*不幸的是，这不适用于
scs
文件。只支持
.ts
文件，而且
html
将很快推出。这看起来很有希望！你能给我举个例子吗？我已经在anwserWow中举了一个例子，这正是我所需要的。但是，6.0.*中的一个bug阻止替换html和scss文件。似乎已在6.1中修复。*不幸的是，这不适用于
scs
文件。只支持
.ts
文件，而且
html
将很快得到支持。