angular / angular/components

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

Ouverte
#29,903 1 commentaire 2 réactions 0 personnes assignées Voir sur GitHub
area: material/dialog material spec 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

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la définition du backdrop dans src/cdk/overlay/_index.scss, puis reproduisez le problème à l’aide de la Material dialog overview avec un thème sombre et comparez-la avec le Material 3 dialog example lié. Le travail est terminé lorsque les boîtes de dialogue présentent un contraste de backdrop lisible dans les thèmes sombres sans nuire au comportement du thème clair.

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

Évaluation

Stack technique
angular, scss
Domaine
accessibility, frontend
Type d'issue
Bug
Difficulté
2/5
Temps estimé
1-3 heures
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
48/100

Recevez les nouvelles issues par e-mail

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