Description
Is this a regression?
- 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, 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:
- Go to https://m3.material.io/components/dialogs/specs and see that dialog example use a white backdrop on dark mode
- Go to https://material.angular.io/components/dialog/overview, select a dark theme and open dialog in any example
Expected Behavior
Actual Behavior
Environment
- Angular: 18.2.8
- CDK/Material: 18.2.8
- Browser(s): Chrome (latest)
- Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu 24.10