Angular Material2 использует разные темы (цвета) для разных сборок / сред - PullRequest
Новая
       64

Angular Material2 использует разные темы (цвета) для разных сборок / сред

0 голосов
/ 11 июня 2018

Я получил приложение Angular6, которое использует CLI и material2 с пользовательской темой.Теперь для другого клиента я хочу использовать это же приложение, но с разными цветами.Как я могу это сделать?Я не хочу поддерживать вторую базу кода, поэтому это должно быть что-то со сборкой и / или средой, я так думаю?

Моя тема, импортированная в 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);

Ответы [ 2 ]

0 голосов
/ 11 июня 2018

Если вы используете 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"
                }
              ]
            }
          }
        }
      }
    }
  }
}
0 голосов
/ 11 июня 2018

Один из подходов, который вы могли бы использовать, - использовать для этого базовые классы 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>
...