angular / angular/components

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

Ouverte
#30,856 5 commentaires 1 réaction 0 personnes assignées Voir sur GitHub
area: material/button P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz liée et comparez le comportement de mat-raised-button dans dark-theme avec l’exemple Angular Material v16. Examinez le style des boutons et le comportement d’elevation concernés par la reproduction, puis vérifiez que les boutons en dark-mode présentent un contraste et une elevation visibles sans provoquer de régression dans le light theme.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
accessibility, design, frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
Active
Clarté
Plutôt claire
Accessibilité débutants
55/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.