0

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);
4

2 回答 2

3

如果您使用 angular 6，则可以fileReplacements使用angular.json. 使用它，您可以让文件 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"
                }
              ]
            }
          }
        }
      }
    }
  }
}
于 2018-06-11T12:37:17.630 回答
1

您可以采取的一种方法是为此使用基本的 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 const client = {
 clientName: 'xxx'
}

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

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>
于 2018-06-11T10:06:55.853 回答