title: How to Keep Theme selected by User even if page reloads?
body: <p>I am working on theming of my angular app. When User click a button to change the theme , the theme is getting changed successfully. 
  But once the page is refreshed the selected theme is getting lost and the default theme is loading. 
  Is there anyway to maintain the theme chosen by user even if the browser is refreshed( or till logout or a particular period of time). 
  I have googled it but not able to find any effective solution. 
  I am thinking of maintaining the theme settings in cookies. Can Anyone  please guide me on this ?      </p>
  
  <p>theme.scss file : </p>
  
  <pre><code>@import '~@angular/material/theming';
  @include mat-core();
  
  // Typography
  $custom-typography: mat-typography-config(
    $font-family: Raleway,
    $headline: mat-typography-level(24px, 48px, 400),
    $body-1: mat-typography-level(16px, 24px, 400)
  );
  @include angular-material-typography($custom-typography);
  
  // Default colors
  $my-app-primary: mat-palette($mat-teal, 700, 100, 800);
  $my-app-accent:  mat-palette($mat-teal, 700, 100, 800);
  
  $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent);
  @include angular-material-theme($my-app-theme);
  
  // Dark theme
  $dark-primary: mat-palette($mat-indigo);
  $dark-accent:  mat-palette($mat-pink, A200, A100, A400);
  $dark-warn:    mat-palette($mat-deep-orange);
  $dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
  
  .dark-theme {
    @include angular-material-theme($dark-theme);
  }
  
  // Light theme
  $light-primary: mat-palette($mat-grey, 200, 500, 300);
  $light-accent: mat-palette($mat-brown, 200);
  $light-warn: mat-palette($mat-deep-orange, 200);
  
  $light-theme: mat-light-theme($light-primary, $light-accent, $light-warn);
  
  .light-theme {
    @include angular-material-theme($light-theme)
  }
  </code></pre>
  
  <p>component.html file : </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-slide-toggle class="ctheme" (click)="toggleTheme()"&gt;Change Theme!&lt;/mat-slide-toggle&gt;
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>toggleTheme() {
      if (this.isdarkTheme) {
         this.theme = 'default-theme';
      } else {
          this.theme = 'dark-theme';
      }
      this.overlayContainer.getContainerElement().classList.add(this.theme);
      this.componentCssClass = this.theme;
      this.isdarkTheme = !this.isdarkTheme;
      }</code></pre>
  </div>
  </div>
  </p>