angular / angular/components

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

未关闭
#29,903 1 条评论 2 个 reaction 已指派 0 人 在 GitHub 查看
area: material/dialog material spec P3
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

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

贡献指南

打开贡献指南

调研方向

先查看 src/cdk/overlay/_index.scss 中的 backdrop 定义,然后使用深色主题的 Material dialog overview 重现该问题,并将其与链接的 Material 3 dialog example 进行比较。当对话框在深色主题中具有清晰可读的 backdrop 对比度,且不影响浅色主题的行为时,即表示完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, scss
领域
accessibility, frontend
Issue 类型
缺陷
难度
2/5
预计耗时
1-3 小时
活跃度
停滞
描述清晰度
基本清楚
新手友好度
48/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。