テーマの変更dynamicly角度2 /流星

Question

私は流星/角度2アプリケーションを持っていると私は利用可能な2つのオプションのいずれかのユーザーをクリックすると、テーマを変更したいと：

<select onChange="changeTheme()"> 
<option value="blue"> Blue</option> 
<option value="gray">Gray</option> 
</select> 

私のアプリケーションは青をロードデフォルトでは、テーマとそれがmain.scssの下で定義されています：

@import '../node_modules/@angular/material/core/theming/all-theme'; 
$app-primary: md-palette($md-light-blue, 700, 100, 700); 

私の質問はどのように、どこユーザーが特定の1つ、例えばグレーを選択したとき、私はテーマを変更することができますか？ Meteor.startup（）関数の中で何かすべきことはありますか？またはコンポーネントの内部にありますか？

おかげ

Answer 1

まず、あなたがカラの優れたプレゼンテーションに見てみる必要があります：あなたの質問に答えるために、そして、 https://www.youtube.com/watch?v=0q9FOeEELPY

、ここにあなたがそれを行う必要があります方法は次のとおりです。

your- scss-file.scss：

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

@include md-core(); 

$primary: md-palette($md-deep-purple); 
$accent: md-palette($md-amber); 

$theme: md-light-theme($primary, $accent); 

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

.dark-theme { 
    $dark-p: md-palette($md-deep-purple, 700); 
    $dark-a: md-palette($md-amber); 

    $dark-t: md-dark-theme($dark-p, $dark-a); 

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

あなた-HTML-file.html：

<div [class.dark-theme]="isDarkTheme"> 
<button (click)="toggleTheme()">Toggle theme</button> 

あなた-TS-file.ts：あなたはトグル以上が必要な場合はもちろん

@Component({ 
    selector: 'your-component-selector', 
    templateUrl: './your-html-file.html', 
    styleUrls: ['your-scss-file.scss'] 
}) 
export class YourComponent implements { 
    // by default, if you do not want the dark theme 
    private isDarkTheme = false; 

    constructor() { } 

    toggleTheme() { 
    this.isDarkTheme = !this.isDarkTheme; 
    } 
} 

、あなたは> 2つのテーマを持っているので、 [class.dark-theme]="someBoolean"ではなく、テーマのクラスを[class]プロパティに渡してください。