Сменить тему динамически с угловым 2/Meteor

Question

У меня есть/Угловое 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); 

Мой вопрос состоит в том, как и где я могу изменить тему, когда пользователь может выбрать конкретный один, например, Грей? Это что-то, что я должен делать внутри функции Meteor.startup()? или внутри компонента?

Благодаря

Answer 1

Во-первых, вы должны смотреть на прекрасное выступление Кара: https://www.youtube.com/watch?v=0q9FOeEELPY

Тогда, чтобы ответить на ваш вопрос, вот как вы должны это сделать:

СВОИМИ СКС-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], а не [class.dark-theme]="someBoolean".