Skip to content

Commit 4282917

Browse files
crisbetotinayuangao
authored andcommitted
feat(theming): log a warning if core theme isn't loaded (#3781)
* 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 a wrong `typeof` check when determining the doctype. Fixes #2828. Note: I originally went with looping through the `document.styleSheets` to check whether the selector is defined, however I had to switch back to `getComputedStyle`, because browsers don't expose the `document.styleSheets`, if the CSS file is being loaded from another domain. This would've caused the warning to be logged if the user loads over a CDN. * refactor: address feedback
1 parent c4ec662 commit 4282917

File tree

2 files changed

+36
-2
lines changed

2 files changed

+36
-2
lines changed

src/lib/core/_core.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,9 @@
3636
$background: map-get($theme, background);
3737
background-color: mat-color($background, background);
3838
}
39+
40+
// Marker that is used to determine whether the user has added a theme to their page.
41+
.mat-theme-loaded-marker {
42+
display: none;
43+
}
3944
}

src/lib/core/compatibility/compatibility.ts

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import {
99
} from '@angular/core';
1010
import {DOCUMENT} from '@angular/platform-browser';
1111

12+
/** Whether we've done the global sanity checks (e.g. a theme is loaded, there is a doctype). */
13+
let hasDoneGlobalChecks = false;
1214

1315
export const MATERIAL_COMPATIBILITY_MODE = new OpaqueToken('md-compatibility-mode');
1416

@@ -170,14 +172,41 @@ export class CompatibilityModule {
170172
};
171173
}
172174

173-
constructor(@Optional() @Inject(DOCUMENT) document: any) {
174-
if (isDevMode() && typeof document && !document.doctype) {
175+
constructor(@Optional() @Inject(DOCUMENT) private _document: any) {
176+
if (!hasDoneGlobalChecks && isDevMode()) {
177+
this._checkDoctype();
178+
this._checkTheme();
179+
hasDoneGlobalChecks = true;
180+
}
181+
}
182+
183+
private _checkDoctype(): void {
184+
if (this._document && !this._document.doctype) {
175185
console.warn(
176186
'Current document does not have a doctype. This may cause ' +
177187
'some Angular Material components not to behave as expected.'
178188
);
179189
}
180190
}
191+
192+
private _checkTheme(): void {
193+
if (this._document) {
194+
const testElement = this._document.createElement('div');
195+
196+
testElement.classList.add('mat-theme-loaded-marker');
197+
this._document.body.appendChild(testElement);
198+
199+
if (getComputedStyle(testElement).display !== 'none') {
200+
console.warn(
201+
'Could not find Angular Material core theme. Most Material ' +
202+
'components may not work as expected. For more info refer ' +
203+
'to the theming guide: https://material.angular.io/guide/theming'
204+
);
205+
}
206+
207+
this._document.body.removeChild(testElement);
208+
}
209+
}
181210
}
182211

183212

0 commit comments

Comments
 (0)