angular / angular/components

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

Open
#29,903 1 comment 2 reactions 0 assignees View on GitHub
area: material/dialog material spec P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
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

Contributor guide

Open the contributing guide

Research direction

Start with the backdrop definition in src/cdk/overlay/_index.scss, then reproduce the issue using the Material dialog overview with a dark theme and compare it with the linked Material 3 dialog example. Done means dialogs have readable backdrop contrast in dark themes without harming light-theme behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, scss
Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.