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

src/lib/autocomplete/index.ts

@@ -1,14 +1,19 @@
 import {ModuleWithProviders, NgModule} from '@angular/core';
-
-import {MdOptionModule, OverlayModule, OVERLAY_PROVIDERS, CompatibilityModule} from '../core';
+import {
+  MdOptionModule,
+  OverlayModule,
+  OVERLAY_PROVIDERS,
+  CompatibilityModule,
+  MdThemeCheckModule,
+} from '../core';
 import {CommonModule} from '@angular/common';
 import {MdAutocomplete} from './autocomplete';
 import {MdAutocompleteTrigger} from './autocomplete-trigger';
 export * from './autocomplete';
 export * from './autocomplete-trigger';
 
 @NgModule({
-  imports: [MdOptionModule, OverlayModule, CompatibilityModule, CommonModule],
+  imports: [MdOptionModule, OverlayModule, CompatibilityModule, CommonModule, 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

@@ -36,4 +36,9 @@
     $background: map-get($theme, background);
     background-color: md-color($background, background);
   }
+
+  // Marker that is used to determine whether the user has added a theme to their page.
+  .md-theme-loaded-marker {
+    display: none;
+  }
 }

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,40 @@
+import {NgModule, isDevMode} from '@angular/core';
+
+/** Whether the theme presence has already been checked. */
+let hasBeenChecked = false;
+
+/**
+ * Module that verifies that the user has loaded the core theming file,
+ * without which most Material module won't work as expected.
+ *
+ * Note on testing methodology: A more efficient way to check for the theme
+ * would be to loop through the `document.styleSheets`, however most browsers
+ * don't expose the stylesheet rules, if the file was loaded from another domain.
+ * This would trigger false positives if the theme is being loaded from a CDN.
+ *
+ * @docs-private
+ */
+@NgModule()
+export class MdThemeCheckModule {
+  constructor() {
+    if (hasBeenChecked || typeof document === 'undefined' || !isDevMode()) {
+      return;
+    }
+
+    let testElement = document.createElement('div');
+
+    testElement.classList.add('md-theme-loaded-marker');
+    document.body.appendChild(testElement);
+
+    if (getComputedStyle(testElement).display !== 'none') {
+      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'
+      );
+    }
+
+    document.body.removeChild(testElement);
+    hasBeenChecked = true;
+  }
+}

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';
 
@@ -262,7 +262,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';
@@ -62,6 +63,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],

src/lib/select/index.ts

@@ -5,13 +5,14 @@ import {MdOptionModule} from '../core/option/option';
 import {
   CompatibilityModule,
   OverlayModule,
+  MdThemeCheckModule,
 } from '../core';
 export * from './select';
 export {fadeInContent, transformPanel, transformPlaceholder} from './select-animations';
 
 
 @NgModule({
-  imports: [CommonModule, OverlayModule, MdOptionModule, CompatibilityModule],
+  imports: [CommonModule, OverlayModule, MdOptionModule, CompatibilityModule, MdThemeCheckModule],
   exports: [MdSelect, MdOptionModule, CompatibilityModule],
   declarations: [MdSelect],
 })