Question

我正在尝试将Angular Material 2用于我的Angular 2应用程序。

我没有找到如何全局更改材料主题（primaryColor等）。我知道Angular Material 2仍处于alpha状态，但是目前有办法吗？

Answer 1

https://github.com/angular/material2/issues/287

@ samio80这些样式目前都是以主题为主题编写的，但我们还没有针对主题的部署策略。作为此时的解决方法，您可以直接提取源并通过修改_default-theme.scss和创建npm包（通过脚本stage-release.sh）来自定义主题。

请记住，我们还处于alpha过程的早期阶段，因此，API或行为可能会在不同版本之间发生变化。

Answer 2

以下是Angular 5.1和Angular Material 5.0中动态Angular Material主题实现的一个示例。

（编辑） - 目前正在测试并使用角度7+。

使用可编辑示例 - https://stackblitz.com/edit/dynamic-material-theming

在theme.scss文件中，包含一个默认主题（注意它不是保存在类名下 - 这是Angular会将它用作默认值），然后是一个明暗主题。

<强> theme.scss

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

// Typography
$custom-typography: mat-typography-config(
  $font-family: Raleway,
  $headline: mat-typography-level(24px, 48px, 400),
  $body-1: mat-typography-level(16px, 24px, 400)
);
@include angular-material-typography($custom-typography);

// Default colors
$my-app-primary: mat-palette($mat-teal, 700, 100, 800);
$my-app-accent:  mat-palette($mat-teal, 700, 100, 800);

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent);
@include angular-material-theme($my-app-theme);

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

$dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

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

// Light theme
$light-primary: mat-palette($mat-grey, 200, 500, 300);
$light-accent: mat-palette($mat-brown, 200);
$light-warn: mat-palette($mat-deep-orange, 200);

$light-theme: mat-light-theme($light-primary, $light-accent, $light-warn);

.light-theme {
  @include angular-material-theme($light-theme)
}

在app.component文件中，包含来自@ angular / cdk / overlay的OverlayContainer。你可以在这里找到Angular的文档https://material.angular.io/guide/theming;虽然他们的实施有点不同。请注意，我还必须在App.module中包含OverlayModule作为导入。

在我的app.component文件中，我还将@HostBinding('class') componentCssClass;声明为变量，用于将主题设置为类。

<强> app.component.ts

import {Component, HostBinding, OnInit} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Version } from './classes/version';
import { OverlayContainer} from '@angular/cdk/overlay';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {

  constructor(private http: HttpClient, public overlayContainer: OverlayContainer) {}

  title = 'app';
  version: Version;
  @HostBinding('class') componentCssClass;

  ngOnInit() {
    this.getVersion();
  }

  onSetTheme(theme) {
    this.overlayContainer.getContainerElement().classList.add(theme);
    this.componentCssClass = theme;
  }

  getVersion() {
    this.http.get<Version>('/api/version')
      .subscribe(data => {
        this.version = data;
      });
  }

}

<强> app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { HttpClientModule } from '@angular/common/http';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';

import { AppComponent } from './app.component';

import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatButtonModule,
    OverlayModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

最后，从您的视图中调用onSetTheme函数。

<强> app.component.html

<button mat-raised-button color="primary" (click)="onSetTheme('default-theme')">Default</button>
<button mat-raised-button color="primary" (click)="onSetTheme('dark-theme')">Dark</button>
<button mat-raised-button color="primary" (click)="onSetTheme('light-theme')">Light</button>

您可以考虑使用observable，以便功能更具动态性。

Answer 3

以下是角度材料主题指南的链接 - https://material.angular.io/guide/theming

这是一个示例应用程序，它实现了指南中描述的主题方法 - https://github.com/jelbourn/material2-app

更改Angular 2的材质设计主题

3 个答案: