feat(theming): log a warning if core theme isn't loaded

Checks the user's loaded stylesheets and logs a warning if the Material core theme isn't loaded.

Fixes #2828.

Author: crisbeto

src/lib/autocomplete/index.ts

@@ -1,12 +1,18 @@
 import {ModuleWithProviders, NgModule} from '@angular/core';
-import {MdOptionModule, OverlayModule, OVERLAY_PROVIDERS, CompatibilityModule} from '../core';
+import {
+  MdOptionModule,
+  OverlayModule,
+  OVERLAY_PROVIDERS,
+  CompatibilityModule,
+  MdThemeCheckModule
+} from '../core';
 import {MdAutocomplete} from './autocomplete';
 import {MdAutocompleteTrigger} from './autocomplete-trigger';
 export * from './autocomplete';
 export * from './autocomplete-trigger';
 
 @NgModule({
-  imports: [MdOptionModule, OverlayModule, CompatibilityModule],
+  imports: [MdOptionModule, OverlayModule, CompatibilityModule, MdThemeCheckModule],
   exports: [MdAutocomplete, MdOptionModule, MdAutocompleteTrigger, CompatibilityModule],
   declarations: [MdAutocomplete, MdAutocompleteTrigger],
 })

src/lib/button-toggle/button-toggle.ts

@@ -25,6 +25,7 @@ import {
   coerceBooleanProperty,
   UNIQUE_SELECTION_DISPATCHER_PROVIDER,
   CompatibilityModule,
+  MdThemeCheckModule,
 } from '../core';
 
 /** Acceptable types for a button toggle. */
@@ -464,7 +465,7 @@ export class MdButtonToggle implements OnInit {
 
 
 @NgModule({
-  imports: [FormsModule, CompatibilityModule],
+  imports: [FormsModule, CompatibilityModule, MdThemeCheckModule],
   exports: [
     MdButtonToggleGroup,
     MdButtonToggleGroupMultiple,

src/lib/button/button.ts

@@ -10,7 +10,12 @@ import {
   ModuleWithProviders,
 } from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {MdRippleModule, coerceBooleanProperty, CompatibilityModule} from '../core';
+import {
+  MdRippleModule,
+  coerceBooleanProperty,
+  CompatibilityModule,
+  MdThemeCheckModule
+} from '../core';
 
 
 // TODO(jelbourn): Make the `isMouseDown` stuff done with one global listener.
@@ -164,7 +169,7 @@ export class MdAnchor extends MdButton {
 
 
 @NgModule({
-  imports: [CommonModule, MdRippleModule, CompatibilityModule],
+  imports: [CommonModule, MdRippleModule, CompatibilityModule, MdThemeCheckModule],
   exports: [MdButton, MdAnchor, CompatibilityModule],
   declarations: [MdButton, MdAnchor],
 })

src/lib/card/card.ts

@@ -6,7 +6,7 @@ import {
   ChangeDetectionStrategy,
   Directive
 } from '@angular/core';
-import {CompatibilityModule} from '../core';
+import {CompatibilityModule, MdThemeCheckModule} from '../core';
 
 
 /**
@@ -101,7 +101,7 @@ export class MdCardTitleGroup {}
 
 
 @NgModule({
-  imports: [CompatibilityModule],
+  imports: [CompatibilityModule, MdThemeCheckModule],
   exports: [
     MdCard,
     MdCardHeader,

src/lib/checkbox/checkbox.ts

@@ -16,7 +16,7 @@ import {
 import {CommonModule} from '@angular/common';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
 import {coerceBooleanProperty} from '../core/coercion/boolean-property';
-import {MdRippleModule, CompatibilityModule} from '../core';
+import {MdRippleModule, CompatibilityModule, MdThemeCheckModule} from '../core';
 
 
 /** Monotonically increasing integer used to auto-generate unique ids for checkbox components. */
@@ -403,7 +403,7 @@ export class MdCheckbox implements ControlValueAccessor {
 
 
 @NgModule({
-  imports: [CommonModule, MdRippleModule, CompatibilityModule],
+  imports: [CommonModule, MdRippleModule, CompatibilityModule, MdThemeCheckModule],
   exports: [MdCheckbox, CompatibilityModule],
   declarations: [MdCheckbox],
 })

src/lib/chips/chip-list.ts

@@ -11,6 +11,7 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 
+import {MdThemeCheckModule} from '../core';
 import {MdChip} from './chip';
 import {FocusKeyManager} from '../core/a11y/focus-key-manager';
 import {coerceBooleanProperty} from '../core/coercion/boolean-property';
@@ -210,7 +211,7 @@ export class MdChipList implements AfterContentInit {
 }
 
 @NgModule({
-  imports: [],
+  imports: [MdThemeCheckModule],
   exports: [MdChipList, MdChip],
   declarations: [MdChipList, MdChip]
 })

src/lib/core/_core.scss

@@ -26,14 +26,21 @@
 
 // Mixin that renders all of the core styles that depend on the theme.
 @mixin md-core-theme($theme) {
-  @include md-ripple-theme($theme);
-  @include md-option-theme($theme);
-  @include md-pseudo-checkbox-theme($theme);
+  // Marker that is used to determine whether the user has added a theme to their page.
+  // Note that only the selector is being used, but we add a property, in order to avoid
+  // it being removed by minifiers.
+  .md-theme-loaded-marker {
+    color: #000;
+  }
 
   // Wrapper element that provides the theme background when the
   // user's content isn't inside of a `md-sidenav-container`.
   .md-app-background {
     $background: map-get($theme, background);
     background-color: md-color($background, background);
   }
+
+  @include md-ripple-theme($theme);
+  @include md-option-theme($theme);
+  @include md-pseudo-checkbox-theme($theme);
 }

src/lib/core/core.ts

@@ -8,6 +8,7 @@ import {PortalModule} from './portal/portal-directives';
 import {OverlayModule} from './overlay/overlay-directives';
 import {A11yModule} from './a11y/index';
 import {MdSelectionModule} from './selection/index';
+import {MdThemeCheckModule} from './theming/theme-check';
 
 
 // RTL
@@ -86,6 +87,9 @@ export {isFakeMousedownFromScreenReader} from './a11y/fake-mousedown';
 
 export {A11yModule} from './a11y/index';
 
+// Theming check
+export {MdThemeCheckModule} from './theming/theme-check';
+
 export {
   UniqueSelectionDispatcher,
   UniqueSelectionDispatcherListener,
@@ -137,6 +141,7 @@ export {CompatibilityModule, NoConflictStyleCompatibilityMode} from './compatibi
     A11yModule,
     MdOptionModule,
     MdSelectionModule,
+    MdThemeCheckModule,
   ],
   exports: [
     MdLineModule,
@@ -148,6 +153,7 @@ export {CompatibilityModule, NoConflictStyleCompatibilityMode} from './compatibi
     A11yModule,
     MdOptionModule,
     MdSelectionModule,
+    MdThemeCheckModule,
   ],
 })
 export class MdCoreModule {

src/lib/core/theming/theme-check.ts

@@ -0,0 +1,39 @@
+import {NgModule, isDevMode} from '@angular/core';
+
+/**
+ * Module that verifies that the user has loaded the core theming file,
+ * without which most Material module won't work as expected.
+ * @docs-private
+ */
+@NgModule()
+export class MdThemeCheckModule {
+  constructor() {
+    if (!isDevMode() || typeof document === 'undefined') {
+      return;
+    }
+
+    for (let i = 0; i < document.styleSheets.length; i++) {
+      // The try/catch is needed, because some browsers can throw a security
+      // error when accessing the `cssRules` from another domain.
+      try {
+        let rules = (document.styleSheets.item(i) as CSSStyleSheet).cssRules;
+
+        if (rules) {
+          for (let j = 0; j < rules.length; j++) {
+            let selector = (rules.item(j) as CSSStyleRule).selectorText;
+
+            if (selector && selector.includes('.md-theme-loaded-marker')) {
+              return;
+            }
+          }
+        }
+      } catch (e) { }
+    }
+
+    console.warn(
+      'Could not find Angular Material core theme. Most Material ' +
+      'components may not work as expected. For more info refer ' +
+      'to the theming guide: https://github.com/angular/material2/blob/master/guides/theming.md'
+    );
+  }
+}

src/lib/dialog/index.ts

@@ -4,6 +4,7 @@ import {
   PortalModule,
   A11yModule,
   CompatibilityModule,
+  MdThemeCheckModule,
 } from '../core';
 import {MdDialog} from './dialog';
 import {MdDialogContainer} from './dialog-container';
@@ -21,6 +22,7 @@ import {
     PortalModule,
     A11yModule,
     CompatibilityModule,
+    MdThemeCheckModule,
   ],
   exports: [
     MdDialogContainer,