角度のある材質2.クリック時の明るさから暗い色への切り替え

Question

私はAngular 2 Materialアプリケーションを持っています。 そして私がしたいのは、単純なボタンbuttonをクリックするだけで、テーマを暗いから明るく切り替えることです。

どうすればいいですか？

app.component.html：あなたのmenuで

Answer 1

<div [class.dark-theme]="isDarkTheme"> 
    <!--Your application content here--> 
    <md-menu #more="mdMenu"> 
     <!--Your content here--> 
     <button md-menu-item (click)="changeTheme()"> 
      Change Theme 
     </button> 
    </md-menu> 
</div> 

app.component.ts：

// import statements here 
import {Component} from '@angular/core'; 

export class AppComponent { 
    // Initialize isDarkTheme to false 
    isDarkTheme: boolean = false; 
    // Your code here 

    changeTheme(): void { 
     if (this.isDarkTheme) { 
      this.isDarkTheme = false; 
     } else { 
      this.isDarkTheme = true; 
     } 
    } 
} 

theme.scss：

@import '~@angular/material/core/theming/_all-theme'; 

@include mat-core(); 
.dark-theme { 
    // Dark theme 
    $app-dark-primary: mat-palette($mat-pink, 700); 
    $app-dark-accent: mat-palette($mat-blue-grey); 
    $app-dark-theme: mat-dark-theme($app-dark-primary, $app-dark-accent); 

    @include angular-material-theme($app-dark-theme); 

}