Angular Material2对不同的构建/环境使用不同的主题（颜色）

Question

I got an Angular6 app that uses the CLI and material2 with a custom theme. Now for another customer I want to use that same app, but with different colors. How can I do this? I don't want to maintain a second code base so it has to be something with the build and/or environment I think so?

My theme which is imported in styles.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);

Answer 1

One approach you could take would be to use basic CSS classes for this. In your theme file, define different themes:

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

and in your evnironments.ts file, define the customer: (you would need separate environments for each customer I guess)

export const client = {
 clientName: 'xxx'
}

In your component you can set the current customer:

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

Then in your template you can add the relevant class to your main container:

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

Answer 2

If you're using angular 6, you can use the fileReplacements configuration section in angular.json . Using this, you can have a file customer1.theme.scss replacing the file theme.scss only when building for a certain environment.

Here is an exemple :

{
  "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"
                }
              ]
            }
          }
        }
      }
    }
  }
}