fix: switch to using getComputedStyle

Author: crisbeto

src/lib/core/_core.scss

@@ -26,12 +26,9 @@
 
 // Mixin that renders all of the core styles that depend on the theme.
 @mixin md-core-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;
-  }
+  @include md-ripple-theme($theme);
+  @include md-option-theme($theme);
+  @include md-pseudo-checkbox-theme($theme);
 
   // Wrapper element that provides the theme background when the
   // user's content isn't inside of a `md-sidenav-container`.
@@ -40,7 +37,8 @@
     background-color: md-color($background, background);
   }
 
-  @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.
+  .md-theme-loaded-marker {
+    display: none;
+  }
 }

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

@@ -1,39 +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 (!isDevMode() || typeof document === 'undefined') {
+    if (hasBeenChecked || typeof document === 'undefined' || !isDevMode()) {
       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;
+    let testElement = document.createElement('div');
 
-        if (rules) {
-          for (let j = 0; j < rules.length; j++) {
-            let selector = (rules.item(j) as CSSStyleRule).selectorText;
+    testElement.classList.add('md-theme-loaded-marker');
+    document.body.appendChild(testElement);
 
-            if (selector && selector.includes('.md-theme-loaded-marker')) {
-              return;
-            }
-          }
-        }
-      } catch (e) { }
+    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'
+      );
     }
 
-    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;
   }
 }