angular / angular/components

bug(mat-raised-button): Low contrast on buttons in dark mode using Angular Material 18/19

Offen
#30,856 5 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen
area: material/button P3
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**...

![Image](https://github.com/user-attachments/assets/a2f844c9-375c-40e0-9ad3-05f1854f1deb)

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:

![Image](https://github.com/user-attachments/assets/644e0c73-af52-40e8-b90a-3edbdad3bdbe)

### 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

![Image](https://github.com/user-attachments/assets/e56031b3-675c-4169-a538-b51eae22a7b4)

### 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:

![Image](https://github.com/user-attachments/assets/a2f844c9-375c-40e0-9ad3-05f1854f1deb)

### Environment

- Angular: 19.2.6
- CDK/Material: 19.2.6
- Browser(s): Firefox
- Operating System (e.g. Windows, macOS, Ubuntu): Linux Mint (Ubuntu)

Beitragsleitfaden

Beitragsleitfaden öffnen

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

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.