Change theme dynamicly with Angular 2 / Meteor

问题:

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>

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

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 ?

Thanks

回答1:

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

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".