angular / angular/components

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

Abierto
#29,903 1 comentario 2 reacciones 0 asignados Ver en GitHub
area: material/dialog material spec P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con la definición del backdrop en src/cdk/overlay/_index.scss, luego reproduce el problema usando la Material dialog overview con un tema oscuro y compárala con el Material 3 dialog example enlazado. El objetivo se cumple cuando los diálogos tienen un contraste legible del backdrop en temas oscuros sin afectar al comportamiento del tema claro.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, scss
Área
accessibility, frontend
Tipo de issue
Error
Dificultad
2/5
Tiempo estimado
1-3 horas
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
48/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.