I would categorize this as a suggestion instead of a bug, but as someone who spent the weekend learning to use Angular Material, I have three suggestions that I think would significantly assist new user uptake, both in relation to the use of themes:
Firstly, I suggest moving the informational snippet about needing content to be contained within a <mat-sidenav-container> or having the mat-app-background class in place to a more prominent role in the theming instructions. This information is necessary to implement theming and it is easy to miss on first glance.
Secondly, I suggest adding documentation in the component docs regarding which components do and do not function in the absence of a conventional HTML element. I found that <mat-form-field> elements do absolutely nothing if they are located on the parent level of their HTML file: they must be included in a conventional HTML element (like a div) to work. This would be useful information to include.
Thirdly, I suggest the addition of simple customizable components for basic page roles for background theming, particularly a generic way to add a primary or accent color background. If this is not desirable, better documentation of the selector specificity used by Angular Material would be welcome. It currently requires element inspection or examination of the theme css to determine the specificity of Material themed elements (like mat-toolbar) if you wish to change their color.
Existing elements (like <mat-toolbar>) can serve some of these roles but tend to have other specific styling (such as the set font size in mat-toolbar). Better tools to create your own themed elements (or documentation on how the theme colors are applied so that you can interact with them) would, in my view, improve accessibility.
Simply borrowing the existing theme classes (such as mat-primary or mat-accent) doesn't work due to specificity. Having to re-create header-color CSS in individual component scss files results in a lot of duplication of effort: these are exactly the things you'd include at the top level, where they're ignored in favor of the greater specificity of "body>.mat-app-background.mat-typography".
I understand that AM wants to deal in entirely pre-formed components, but I believe that better explanation of how to customize other content around it would be very helpful.
I would categorize this as a suggestion instead of a bug, but as someone who spent the weekend learning to use Angular Material, I have three suggestions that I think would significantly assist new user uptake, both in relation to the use of themes:
Firstly, I suggest moving the informational snippet about needing content to be contained within a <mat-sidenav-container> or having the mat-app-background class in place to a more prominent role in the theming instructions. This information is necessary to implement theming and it is easy to miss on first glance.
Secondly, I suggest adding documentation in the component docs regarding which components do and do not function in the absence of a conventional HTML element. I found that <mat-form-field> elements do absolutely nothing if they are located on the parent level of their HTML file: they must be included in a conventional HTML element (like a div) to work. This would be useful information to include.
Thirdly, I suggest the addition of simple customizable components for basic page roles for background theming, particularly a generic way to add a primary or accent color background. If this is not desirable, better documentation of the selector specificity used by Angular Material would be welcome. It currently requires element inspection or examination of the theme css to determine the specificity of Material themed elements (like mat-toolbar) if you wish to change their color.
Existing elements (like <mat-toolbar>) can serve some of these roles but tend to have other specific styling (such as the set font size in mat-toolbar). Better tools to create your own themed elements (or documentation on how the theme colors are applied so that you can interact with them) would, in my view, improve accessibility.
Simply borrowing the existing theme classes (such as mat-primary or mat-accent) doesn't work due to specificity. Having to re-create header-color CSS in individual component scss files results in a lot of duplication of effort: these are exactly the things you'd include at the top level, where they're ignored in favor of the greater specificity of "body>.mat-app-background.mat-typography".
I understand that AM wants to deal in entirely pre-formed components, but I believe that better explanation of how to customize other content around it would be very helpful.