使用 SASS 的 Angular 应用程序中的动态主题

Question

我们可以在使用 SASS 的 Angular2+ 应用程序中进行动态主题化吗？

我正在使用最新的 Angular 版本 5。它是否具有可以基于主题动态加载和应用 CSS 的机制？

Answer 1

是的，使用自定义材质主题的示例：

styles.scss

@import './themes/theme-dark-green';
@import './themes/theme-pastel-red';

.pastel-red-theme {
   @include angular-material-theme($pastel-red-theme);
}

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

app.component.html

<div class="app-container"
 [ngClass]="{'dark-green-theme': themeService.themeBox['dark-green'],
        'pastel-red-theme': themeService.themeBox['pastel-red']">
  ....
</div>

themeService 主要处理用户从其他组件中选择的主题的激活/停用。那里没有什么太复杂的地方。

自定义 Material 主题的示例（但不是很漂亮:)）：

@import '~@angular/material/theming';
@include mat-core();

$md-mcgpalette0: (
    50 : #fdeeee,
    100 : #fbd4d4,
    200 : #f9b8b8,
    300 : #f69b9b,
    400 : #f48585,
    500 : #f27070,
    600 : #f06868,
    700 : #ee5d5d,
    800 : #ec5353,
    900 : #e84141,
    A100 : #ffffff,
    A200 : #ffffff,
    A400 : #ffd3d3,
    A700 : #ffb9b9,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #000000,
        600 : #000000,
        700 : #000000,
        800 : #000000,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);



// custom background and foreground palettes
$pastel-red-theme-background: (
  status-bar: map_get($mat-grey, 300),
  app-bar:    map_get($mat-grey, 100),
  background: map_get($mat-grey, 50),
  hover:      rgba(black, 0.04),
  card:       white,
  dialog:     white,
  disabled-button: rgba(black, 0.12),
  raised-button: white,
  focused-button: $dark-focused,
  selected-button: map_get($mat-grey, 300),
  selected-disabled-button: map_get($mat-grey, 400),
  disabled-button-toggle: map_get($mat-grey, 200),
  unselected-chip: map_get($mat-grey, 300),
  disabled-list-option: map_get($mat-grey, 200)
);

$pastel-red-theme-foreground: (
  base:              black,
  divider:           $dark-dividers,
  dividers:          $dark-dividers,
  disabled:          $dark-disabled-text,
  disabled-button:   rgba(black, 0.26),
  disabled-text:     $dark-disabled-text,
  hint-text:         $dark-disabled-text,
  secondary-text:    $dark-secondary-text,
  icon:              rgba(black, 0.54),
  icons:             rgba(black, 0.54),
  text:              rgba(black, 0.87),
  slider-min:        rgba(black, 0.87),
  slider-off:        rgba(black, 0.26),
  slider-off-active: rgba(black, 0.38)
);

@function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: $warn,
    is-dark: false,
    foreground: $pastel-red-theme-foreground,
    background: $pastel-red-theme-background
  );
}

$db-app-primary: mat-palette($md-mcgpalette0);
$db-app-accent:  mat-palette($mat-blue);
$db-app-warn:    mat-palette($mat-red);

$pastel-red-theme: create-custom-theme($db-app-primary, $db-app-accent, $db-app-warn);