使用Angular 2/Meteor动态更改主题 [英] Change theme dynamicly with Angular 2 / Meteor

问题描述

我有一个Meteor/Angular 2应用程序，当用户单击两个可用选项之一时，我想更改主题:

I have a Meteor/Angular 2 application and i want to change a theme when a user click on one of the two available options :

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

我的应用程序默认情况下会加载蓝色主题，它是在main.scss下定义的:

My application load the blue theme by default and it's defined under the main.scss :

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

我的问题是，当用户选择特定主题(例如Gray)时，如何以及在何处更改主题?那是我应该在Meteor.startup()函数中做的事情吗?还是在组件内部?

My question is how and where i can change the theme when a user choose a specific one, e-g Gray ? Is that something i should do inside the Meteor.startup() function ? or inside a component ?

谢谢

推荐答案

首先，您应该看一下Kara的出色表现: https://www.youtube.com/watch?v=0q9FOeEELPY

First, you should take a look to the excellent presentation of Kara : https://www.youtube.com/watch?v=0q9FOeEELPY

然后，要回答您的问题，请按以下步骤操作:

Then, to answer your question, here's how you should do it :

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);
}

your-html-file.html :

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

your-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;
  }
}

当然，如果您有两个以上的主题，那么您不仅仅需要进行切换，只需将主题的类传递给[class]属性即可，而不必执行[class.dark-theme]="someBoolean".

Of course, if you need more than a toggle because you have > 2 themes, just pass the class of your theme to the [class] propertie instead of doing [class.dark-theme]="someBoolean".

这篇关于使用Angular 2/Meteor动态更改主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！