angular / angular/components

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

Đang mở
#30,856 5 bình luận 1 reaction 0 người được giao Xem trên GitHub
area: material/button P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với bản tái hiện StackBlitz được liên kết và so sánh hành vi của mat-raised-button trong dark-theme với ví dụ Angular Material v16. Kiểm tra kiểu dáng nút và hành vi elevation liên quan trong bản tái hiện, sau đó xác minh rằng các nút trong dark-mode có độ tương phản và elevation rõ ràng mà không gây hồi quy cho light theme.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
accessibility, design, frontend
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Sôi nổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
55/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.