bug(mat-raised-button): Low contrast on buttons in dark mode using Angular Material 18/19 #30856
Open
1 task done
Labels
needs triage
This issue needs to be triaged by the team
Is this a regression?
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
The text was updated successfully, but these errors were encountered: