angular / angular/components

bug(dialog): low contrast for dialog backdrop in dark theme

Đang mở
#29,903 1 bình luận 2 reaction 0 người được giao Xem trên GitHub
area: material/dialog material spec 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

Using Material 2 theme

### Description

Hi 👋,

While using the dark theme, I noticed that opening a dialog creates a readability issue due to the low contrast between the backdrop and the dialog content. Initially, I assumed this was a personal issue, but several team members have reported the same experience.

Upon reviewing the CSS code, I found that the backdrop color is [set to a single value](https://github.com/angular/components/blob/5ad133d07341fa8647e81277e7f1b9f54b15059a/src/cdk/overlay/_index.scss#L9), regardless of the theme. Currently, it's a faded black, which works fine for light themes but leads to poor contrast in dark themes. This reduces the legibility of the dialog content, making it harder to distinguish between the page background and the overlay.

In previous Material 2 theling API, dark themes used a faded white backdrop, which provided better contrast and enhanced readability.

### Reproduction

Steps to reproduce:
1. Go to https://m3.material.io/components/dialogs/specs and see that dialog example use a white backdrop on dark mode
2. Go to https://material.angular.io/components/dialog/overview, select a dark theme and open dialog in any example

### Expected Behavior

![Image](https://github.com/user-attachments/assets/0043da65-f28c-4cce-bb3a-dcb6bf0cf517)

### Actual Behavior

![Image](https://github.com/user-attachments/assets/5d542b0d-fcc4-423d-85a9-02f6cd61f411)

### Environment

- Angular: 18.2.8
- CDK/Material: 18.2.8
- Browser(s): Chrome (latest)
- Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu 24.10

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 định nghĩa backdrop trong src/cdk/overlay/_index.scss, sau đó tái hiện vấn đề bằng Material dialog overview với theme tối và so sánh với Material 3 dialog example được liên kết. Hoàn tất khi các dialog có độ tương phản backdrop dễ đọc trong các theme tối mà không ảnh hưởng đến hành vi của theme sáng.

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, scss
Lĩnh vực
accessibility, frontend
Loại issue
Lỗi
Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
48/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.