diff --git a/src/lib/core/_core.scss b/src/lib/core/_core.scss index d7ef849bae98..2eeb5405d386 100644 --- a/src/lib/core/_core.scss +++ b/src/lib/core/_core.scss @@ -36,4 +36,9 @@ $background: map-get($theme, background); background-color: mat-color($background, background); } + + // Marker that is used to determine whether the user has added a theme to their page. + .mat-theme-loaded-marker { + display: none; + } } diff --git a/src/lib/core/compatibility/compatibility.ts b/src/lib/core/compatibility/compatibility.ts index 1459e0256669..341e5af7fdd6 100644 --- a/src/lib/core/compatibility/compatibility.ts +++ b/src/lib/core/compatibility/compatibility.ts @@ -9,6 +9,8 @@ import { } from '@angular/core'; import {DOCUMENT} from '@angular/platform-browser'; +/** Whether we've done the global sanity checks (e.g. a theme is loaded, there is a doctype). */ +let hasDoneGlobalChecks = false; export const MATERIAL_COMPATIBILITY_MODE = new OpaqueToken('md-compatibility-mode'); @@ -170,14 +172,41 @@ export class CompatibilityModule { }; } - constructor(@Optional() @Inject(DOCUMENT) document: any) { - if (isDevMode() && typeof document && !document.doctype) { + constructor(@Optional() @Inject(DOCUMENT) private _document: any) { + if (!hasDoneGlobalChecks && isDevMode()) { + this._checkDoctype(); + this._checkTheme(); + hasDoneGlobalChecks = true; + } + } + + private _checkDoctype(): void { + if (this._document && !this._document.doctype) { console.warn( 'Current document does not have a doctype. This may cause ' + 'some Angular Material components not to behave as expected.' ); } } + + private _checkTheme(): void { + if (this._document) { + const testElement = this._document.createElement('div'); + + testElement.classList.add('mat-theme-loaded-marker'); + this._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://material.angular.io/guide/theming' + ); + } + + this._document.body.removeChild(testElement); + } + } }