Description
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
Angular Material v16
Description
Using Angular Material 17, 18 and 19 (so Material 3) on a dark theme (eg. Cyan & Orange) its very hard to see that mat-raised-button is actually is a button...
Link to this example: https://material.angular.io/components/table/examples#table-dynamic-array-data
While on a light theme, there is enough contrast and drop-shadow on a light background, that you can easily see its indeed a raised button:
Reproduction
StackBlitz link: https://stackblitz.com/run?file=src%2Fapp%2Ftable-dynamic-array-data-example.ts
Be sure to select dark theme in the stackblitz. Its basically your official example: https://material.angular.io/components/table/examples#table-dynamic-array-data
Expected Behavior
I would expect to have more contrast with the raised button on the background using dark mode, so you can see at least the outline better. The drop-shadow is of course not working either in dark mode, so that is not helping.
What about a lighter drop-shadow effect?? Since you can't have a dark drop-shadow on a black background. Could this be --mdc-protected-button-container-elevation-shadow?
See for example how it used to be in Angular Material v16: https://v16.material.angular.io/components/table/examples#table-dynamic-array-data
Actual Behavior
No contrast on the dark mat-raised-button on a dark background (aka dark mode), you can not even see that it is a raised button in the first place. See again:
Environment
- Angular: 19.2.6
- CDK/Material: 19.2.6
- Browser(s): Firefox
- Operating System (e.g. Windows, macOS, Ubuntu): Linux Mint (Ubuntu)