title: Use same theme in component
body: <p>Im playing around with angular 4 and material 2. 
  I want to make multiple theme, which I can toggle. </p>
  
  <p>I've read the tutorial on angularjs and also read about themes on material 2.
  I also checked the example at <a href="https://material2-app.firebaseapp.com/" rel="nofollow noreferrer">https://material2-app.firebaseapp.com/</a>
  But they only use one component and I want to apply the same theme to everyone. 
  And I have no Idea on how to make this possible. :S</p>
  
  <p>This is the structure so far. 
  <a href="https://i.stack.imgur.com/ViWUT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ViWUT.png" alt="app structure"></a></p>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component, Optional } from '@angular/core';
  
  import '../assets/css/styles.css';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent {
    isDarkTheme: boolean = false;
  }
  </code></pre>
  
  <p><strong>app.component.html:</strong></p>
  
  <pre><code>&lt;main [class.theme-dark]="isDarkTheme"&gt;
      &lt;md-sidenav-container&gt;
          &lt;md-sidenav class="sidenav" #start (open)="closeStartButton.focus()"&gt;
              Start Sidenav.
              &lt;button md-button [routerLink]="['./dashboard']" routerLinkActive="active" (click)="start.close()"&gt;Dashboard&lt;/button&gt;
              &lt;br&gt;
              &lt;button md-button #closeStartButton (click)="start.close()"&gt;Close&lt;/button&gt;
          &lt;/md-sidenav&gt;
          &lt;md-toolbar color="primary"&gt;
              &lt;button class="icon-button" (click)="start.open()"&gt;
                  &lt;i class="material-icons toolbar-menu"&gt;menu&lt;/i&gt;
              &lt;/button&gt;
              Test
              &lt;span class="toolbar-filler"&gt;&lt;/span&gt;
              &lt;button md-button (click)="isDarkTheme = !isDarkTheme"&gt;TOGGLE THEME&lt;/button&gt;
          &lt;/md-toolbar&gt;
          &lt;div class="content"&gt;
              &lt;router-outlet&gt;&lt;/router-outlet&gt;
          &lt;/div&gt;
      &lt;/md-sidenav-container&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p><strong>dashboard.component.ts:</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'my-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: [ './dashboard.component.css' ]
  })
  export class DashboardComponent {
  
  }
  </code></pre>
  
  <p>If I understand this right its because the themes are capsulated. 
  But how can I pass so when I press "toggle theme" it also applys to the other components?
  Ie. when I toggle in app.component I want the same theme (app.component.scss) in dashboard.component to change from light to dark</p>
  
  <p>this is what it looks like now:
  <a href="https://i.stack.imgur.com/TmTwH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TmTwH.png" alt="enter image description here"></a></p>