web-dev-qa-db-ja.com

angular material 5でテーマを切り替えます

これに関するいくつかの記事を読んでいますが、いくつかの異なる点で矛盾しているようです。最新バージョンのangular material [5.0.0-rc0]の angular material documentation site と同じテーマ切り替えを再作成したいと考えています。

私は2つのカスタムテーマを持っています、これはcustom-theme.scssであり、ほとんど同じであるlight-custom-theme.scssがあり、マットダークテーマはありません

@import '~@angular/material/theming';
$custom-theme-primary: mat-palette($mat-blue);
$custom-theme-accent: mat-palette($mat-orange, A200, A100, A400);
$custom-theme-warn: mat-palette($mat-red);
$custom-theme: mat-dark-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);

@include angular-material-theme($custom-theme);

私のstyles.scssはこんな感じ

@import '~@angular/material/theming';
@include mat-core();
@import 'custom-theme.scss';
@import 'light-custom-theme.scss';
.custom-theme {
  @include angular-material-theme($custom-theme);
}

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

そして、index.html <body class="mat-app-background">

1つのテーマを実行すると、すべてが正常に機能します。しかし、私は2つを切り替えようとしています。両方のテーマをangle-cli.jsonに追加すると、light-custom-themeが引き継ぎます

"styles": [
  "styles.scss",
  "custom-theme.scss",
  "light-custom-theme.scss"
],

テーマの切り替えを処理するために、コンポーネントの1つに次のコードを配置しています

toggleTheme(): void {
  if (this.overlay.classList.contains("custom-theme")) {
    this.overlay.classList.remove("custom-theme");
    this.overlay.classList.add("light-custom-theme");
  } else if (this.overlay.classList.contains("light-custom-theme")) {
    this.overlay.classList.remove("light-custom-theme");
    this.overlay.classList.add("custom-theme");
  } else {
    this.overlay.classList.add("light-custom-theme");
  }
}

ただし、実行するたびにテーマは変わりません。価値があるものとして、overlay.classListの位置0に「cdk-overlay-container」オブジェクトが既にあります。

0:"cdk-overlay-container"
1:"custom-theme"
length:2
value:"cdk-overlay-container custom-theme"

angularマテリアルのドキュメントでは作業するのにあまり役立ちません。どんな助けも感謝します！

ありがとう！

angularsassangular-materialangular5
12
Surreal

Angular 5.1 +/Angular Material 5.0+。の代替ソリューションを次に示します。

*編集：前述のように、これはAngular 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 } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { OverlayContainer} from '@angular/cdk/overlay';

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

  constructor(public overlayContainer: OverlayContainer) {}

  @HostBinding('class') componentCssClass;

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

}
_

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>
_

機能がより動的になるように、オブザーバブルの使用を検討することもできます。

26
K. Waite

getContainerElementのOverlayContainerメソッドを使用する必要があります。以下に使用例を示します。

this.overlay.getContainerElement().classList.add('my-theme');

スタイルファイルについては、custom-theme.scssおよびlight-custom-theme.scss（この場合、クラスにのみ必要です）：

@include angular-material-theme($custom-theme); // Remove this line from custom-theme.scss and light-custom-theme.scss

アプリのテーマも切り替える場合は、おそらく同じtoggleThemeメソッドでこれを使用する必要があります。

toggleTheme(): void {
  if (this.overlay.classList.contains("custom-theme")) {
    this.overlay.classList.remove("custom-theme");
    this.overlay.classList.add("light-custom-theme");
  } else if (this.overlay.classList.contains("light-custom-theme")) {
    this.overlay.getContainerElement().classList.remove("light-custom-theme");
    this.overlay.classList.add("custom-theme");
  } else {
    this.overlay.classList.add("light-custom-theme");
  }
  if (document.body.classList.contains("custom-theme")) {
    document.body.classList.remove("custom-theme");
    document.body.classList.add("light-custom-theme");
  } else if (document.body.classList.contains("light-custom-theme")) {
    document.body.classList.remove("light-custom-theme");
    document.body.classList.add("custom-theme");
  } else {
    this.overlay.classList.add("light-custom-theme");
  }
}
13
Edric

テーマピッカーが https://material.angular.io/ でどのように実装されているかを常に確認し、同じことを行うだけです https://github.com/angular/material。 angular.io/tree/master/src/app/shared/theme-picker そうすることで、いつでも重大な変更を修正できるように資料ドキュメントのソースを参照できるように、永続的なソリューションが得られます。

2
Kuncevič

@ Edric 's solution を参照

local-storageを使用して、選択したテーマを保持します。

作業コードを更新したGithubリンクを次に示します。〜 Angular Material Theme Changer

これも役立つことを願っています。

0
Sourav Dutta