title: Switch themes in angular material 5
body: <p>I been reading a few articles on this but they seem to be conflicting in several different ways. I am hoping to re-create the same theme switching as the <a href="https://material.angular.io/guide/theming" rel="noreferrer">angular material documentation site</a> for the latest version of angular material [5.0.0-rc0]</p>
  
  <p>I have two custom themes, this is custom-theme.scss and there is light-custom-theme.scss which is nearly identical, sans the mat-dark-theme</p>
  
  <pre><code>@import '~@angular/material/theming';
  $custom-theme-primary: mat-palette($mat-blue);
  $custom-theme-accent: mat-palette($mat-orange, A200, A100, A400);
  $custom-theme-warn: mat-palette($mat-red);
  $custom-theme: mat-dark-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
  
  @include angular-material-theme($custom-theme);
  </code></pre>
  
  <p>My styles.scss looks like so</p>
  
  <pre><code>@import '~@angular/material/theming';
  @include mat-core();
  @import 'custom-theme.scss';
  @import 'light-custom-theme.scss';
  .custom-theme {
    @include angular-material-theme($custom-theme);
  }
  
  .light-custom-theme {
    @include angular-material-theme($light-custom-theme);
  }
  </code></pre>
  
  <p>And then it's called in the index.html <code>&lt;body class="mat-app-background"&gt;</code></p>
  
  <p>Everything works fine when I do one theme. But I am trying to switch between the two. Adding both themes into angular-cli.json, the light-custom-theme takes over</p>
  
  <pre><code>"styles": [
    "styles.scss",
    "custom-theme.scss",
    "light-custom-theme.scss"
  ],
  </code></pre>
  
  <p>I have the following code in place in one of my components to handle toggling themes</p>
  
  <pre><code>toggleTheme(): void {
    if (this.overlay.classList.contains("custom-theme")) {
      this.overlay.classList.remove("custom-theme");
      this.overlay.classList.add("light-custom-theme");
    } else if (this.overlay.classList.contains("light-custom-theme")) {
      this.overlay.classList.remove("light-custom-theme");
      this.overlay.classList.add("custom-theme");
    } else {
      this.overlay.classList.add("light-custom-theme");
    }
  }
  </code></pre>
  
  <p>But whenever it runs the theme remains the same. For what it is worth, there is already a "cdk-overlay-container" object at position 0 in overlay.classList</p>
  
  <pre><code>0:"cdk-overlay-container"
  1:"custom-theme"
  length:2
  value:"cdk-overlay-container custom-theme" 
  </code></pre>
  
  <p>I am unsure how to debug this as the angular material documentation doesn't give me too much to work with, any help would be appreciative!</p>
  
  <p>Thanks!</p>