From af67e7c273a9a2d217e5f4201cfc37c6223e569e Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Mon, 7 Aug 2017 19:22:01 +0200
Subject: [PATCH] build: toggle demo app dark theme for overlay components
 (#6305)

Fixes the dark theme not being added to overlay-based components.
---
 src/demo-app/demo-app/demo-app.html |  2 +-
 src/demo-app/demo-app/demo-app.ts   | 31 ++++++++++++++++++++++++-----
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/demo-app/demo-app/demo-app.html b/src/demo-app/demo-app/demo-app.html
index 27f212ecf16..ec6d69db5d3 100644
--- a/src/demo-app/demo-app/demo-app.html
+++ b/src/demo-app/demo-app/demo-app.html
@@ -36,7 +36,7 @@
           <button md-icon-button (click)="toggleFullscreen()" title="Toggle fullscreen">
             <md-icon class="md-24">fullscreen</md-icon>
           </button>
-          <button md-button (click)="dark = !dark">{{dark ? 'Light' : 'Dark'}} theme</button>
+          <button md-button (click)="toggleTheme()">{{dark ? 'Light' : 'Dark'}} theme</button>
           <button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
             {{root.dir.toUpperCase()}}
           </button>
diff --git a/src/demo-app/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts
index 83c11335c80..d87a27830ea 100644
--- a/src/demo-app/demo-app/demo-app.ts
+++ b/src/demo-app/demo-app/demo-app.ts
@@ -1,4 +1,11 @@
-import {Component, ViewEncapsulation, ElementRef, ChangeDetectionStrategy} from '@angular/core';
+import {
+  Component,
+  ViewEncapsulation,
+  ElementRef,
+  ChangeDetectionStrategy,
+  Renderer2,
+} from '@angular/core';
+import {OverlayContainer} from '@angular/material';
 
 const changeDetectionKey = 'mdDemoChangeDetection';
 
@@ -45,9 +52,6 @@ export class DemoAppOnPush {}
   selector: 'demo-app',
   templateUrl: 'demo-app.html',
   styleUrls: ['demo-app.css'],
-  host: {
-    '[class.unicorn-dark-theme]': 'dark',
-  },
   encapsulation: ViewEncapsulation.None,
 })
 export class DemoApp {
@@ -90,7 +94,10 @@ export class DemoApp {
     {name: 'Typography', route: '/typography'}
   ];
 
-  constructor(private _element: ElementRef) {
+  constructor(
+    private _element: ElementRef,
+    private _renderer: Renderer2,
+    private _overlayContainer: OverlayContainer) {
     // Some browsers will throw when trying to access localStorage in incognito.
     try {
       this.changeDetectionStrategy = window.localStorage.getItem(changeDetectionKey) || 'Default';
@@ -122,4 +129,18 @@ export class DemoApp {
       console.error(error);
     }
   }
+
+  toggleTheme() {
+    const darkThemeClass = 'unicorn-dark-theme';
+
+    this.dark = !this.dark;
+
+    if (this.dark) {
+      this._renderer.addClass(this._element.nativeElement, darkThemeClass);
+      this._overlayContainer.themeClass = darkThemeClass;
+    } else {
+      this._renderer.removeClass(this._element.nativeElement, darkThemeClass);
+      this._overlayContainer.themeClass = '';
+    }
+  }
 }