bug(mat-raised-button): Low contrast on buttons in dark mode using Angular Material 18/19
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
### Is this a regression?
- [x] 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)
Beitragsleitfaden
Rechercherichtung
Beginne mit der verlinkten StackBlitz-Reproduktion und vergleiche das Verhalten von mat-raised-button im dark-theme mit dem Beispiel von Angular Material v16. Untersuche das Button-Styling und das Elevation-Verhalten in der Reproduktion und überprüfe anschließend, dass Schaltflächen im dark-mode einen sichtbaren Kontrast und eine sichtbare Elevation aufweisen, ohne das light theme zu beeinträchtigen.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- accessibility, design, frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Aktiv
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 55/100