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 angular#2828.

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,

src/lib/grid-list/grid-list.ts

@@ -16,7 +16,7 @@ import {MdGridTile, MdGridTileText} from './grid-tile';
 import {TileCoordinator} from './tile-coordinator';
 import {TileStyler, FitTileStyler, RatioTileStyler, FixedTileStyler} from './tile-styler';
 import {MdGridListColsError} from './grid-list-errors';
-import {Dir, MdLineModule, CompatibilityModule} from '../core';
+import {Dir, MdLineModule, CompatibilityModule, MdThemeCheckModule} from '../core';
 import {
   coerceToString,
   coerceToNumber,
@@ -144,7 +144,7 @@ export class MdGridList implements OnInit, AfterContentChecked {
 
 
 @NgModule({
-  imports: [MdLineModule, CompatibilityModule],
+  imports: [MdLineModule, CompatibilityModule, MdThemeCheckModule],
   exports: [
     MdGridList,
     MdGridTile,

src/lib/icon/icon.ts

@@ -16,7 +16,7 @@ import {
 } from '@angular/core';
 import {HttpModule, Http} from '@angular/http';
 import {DomSanitizer} from '@angular/platform-browser';
-import {MdError, CompatibilityModule} from '../core';
+import {MdError, CompatibilityModule, MdThemeCheckModule} from '../core';
 import {MdIconRegistry} from './icon-registry';
 export {MdIconRegistry} from './icon-registry';
 
@@ -260,7 +260,7 @@ export const ICON_REGISTRY_PROVIDER = {
 };
 
 @NgModule({
-  imports: [HttpModule, CompatibilityModule],
+  imports: [HttpModule, CompatibilityModule, MdThemeCheckModule],
   exports: [MdIcon, CompatibilityModule],
   declarations: [MdIcon],
   providers: [ICON_REGISTRY_PROVIDER],

src/lib/input/index.ts

@@ -1,8 +1,9 @@
 import {NgModule, ModuleWithProviders} from '@angular/core';
-import {MdPlaceholder, MdInputContainer, MdHint, MdInputDirective} from './input-container';
-import {MdTextareaAutosize} from './autosize';
 import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
+import {MdThemeCheckModule} from '../core';
+import {MdPlaceholder, MdInputContainer, MdHint, MdInputDirective} from './input-container';
+import {MdTextareaAutosize} from './autosize';
 import {PlatformModule} from '../core/platform/index';
 
 
@@ -23,6 +24,7 @@ export * from './input-container-errors';
     CommonModule,
     FormsModule,
     PlatformModule,
+    MdThemeCheckModule,
   ],
   exports: [
     MdPlaceholder,

src/lib/list/list.ts

@@ -11,7 +11,14 @@ import {
     NgModule,
     ModuleWithProviders,
 } from '@angular/core';
-import {MdLine, MdLineSetter, MdLineModule, CompatibilityModule} from '../core';
+import {
+  MdLine,
+  MdLineSetter,
+  MdLineModule,
+  CompatibilityModule,
+  MdThemeCheckModule,
+} from '../core';
+
 
 @Directive({
   selector: 'md-divider, mat-divider'
@@ -72,7 +79,7 @@ export class MdListItem implements AfterContentInit {
 
 
 @NgModule({
-  imports: [MdLineModule, CompatibilityModule],
+  imports: [MdLineModule, CompatibilityModule, MdThemeCheckModule],
   exports: [
     MdList,
     MdListItem,

src/lib/menu/menu.ts

@@ -1,6 +1,6 @@
 import {NgModule, ModuleWithProviders} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {OverlayModule, CompatibilityModule} from '../core';
+import {OverlayModule, CompatibilityModule, MdThemeCheckModule} from '../core';
 import {MdMenu} from './menu-directive';
 import {MdMenuItem} from './menu-item';
 import {MdMenuTrigger} from './menu-trigger';
@@ -13,7 +13,7 @@ export {MenuPositionX, MenuPositionY} from './menu-positions';
 
 
 @NgModule({
-  imports: [OverlayModule, CommonModule, MdRippleModule, CompatibilityModule],
+  imports: [OverlayModule, CommonModule, MdRippleModule, CompatibilityModule, MdThemeCheckModule],
   exports: [MdMenu, MdMenuItem, MdMenuTrigger, CompatibilityModule],
   declarations: [MdMenu, MdMenuItem, MdMenuTrigger],
 })

src/lib/module.ts

@@ -9,6 +9,7 @@ import {
   A11yModule,
   ProjectionModule,
   CompatibilityModule,
+  MdThemeCheckModule,
 } from './core/index';
 
 import {MdButtonToggleModule} from './button-toggle/index';
@@ -61,6 +62,7 @@ const MATERIAL_MODULES = [
   MdTabsModule,
   MdToolbarModule,
   MdTooltipModule,
+  MdThemeCheckModule,
   OverlayModule,
   PortalModule,
   RtlModule,

src/lib/progress-bar/progress-bar.ts

@@ -7,7 +7,7 @@ import {
     Input,
 } from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {CompatibilityModule} from '../core/compatibility/compatibility';
+import {CompatibilityModule, MdThemeCheckModule} from '../core';
 
 // TODO(josephperrott): Benchpress tests.
 // TODO(josephperrott): Add ARIA attributes for progressbar "for".
@@ -86,7 +86,7 @@ function clamp(v: number, min = 0, max = 100) {
 
 
 @NgModule({
-  imports: [CommonModule, CompatibilityModule],
+  imports: [CommonModule, CompatibilityModule, MdThemeCheckModule],
   exports: [MdProgressBar, CompatibilityModule],
   declarations: [MdProgressBar],
 })

src/lib/progress-spinner/progress-spinner.ts

@@ -10,7 +10,7 @@ import {
   NgZone,
   Renderer
 } from '@angular/core';
-import {CompatibilityModule} from '../core';
+import {CompatibilityModule, MdThemeCheckModule} from '../core';
 
 
 // TODO(josephperrott): Benchpress tests.
@@ -362,7 +362,7 @@ function getSvgArc(currentValue: number, rotation: number) {
 
 
 @NgModule({
-  imports: [CompatibilityModule],
+  imports: [CompatibilityModule, MdThemeCheckModule],
   exports: [MdProgressSpinner, MdSpinner, CompatibilityModule],
   declarations: [MdProgressSpinner, MdSpinner],
 })

src/lib/radio/radio.ts

@@ -25,6 +25,7 @@ import {
   UniqueSelectionDispatcher,
   CompatibilityModule,
   UNIQUE_SELECTION_DISPATCHER_PROVIDER,
+  MdThemeCheckModule,
 } from '../core';
 import {coerceBooleanProperty} from '../core/coercion/boolean-property';
 import {VIEWPORT_RULER_PROVIDER} from '../core/overlay/position/viewport-ruler';
@@ -507,7 +508,7 @@ export class MdRadioButton implements OnInit {
 
 
 @NgModule({
-  imports: [CommonModule, MdRippleModule, CompatibilityModule],
+  imports: [CommonModule, MdRippleModule, CompatibilityModule, MdThemeCheckModule],
   exports: [MdRadioGroup, MdRadioButton, CompatibilityModule],
   providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER, VIEWPORT_RULER_PROVIDER],
   declarations: [MdRadioGroup, MdRadioButton],