angular / angular/components

bug(mat-dialog): default Dialog backdrop color is hardcoded black 32% instead of using mat-sys-scrim

Open
#33,578 1 comment 0 reactions 0 assignees View on GitHub
area: cdk/overlay gemini-triaged P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Description

Not sure if this is a bug or intentional, please advise

The default Angular Material behavior when opening a Dialog is to add a 32% opacity black scrim for the overlay. This is not in any way customizable and instead is hardcoded in the Angular CDK overlay implementation: https://github.com/angular/components/blob/501d6744b377e1ef7d1cf7e86edcc0eedbf755e7/src/cdk/overlay/_index.scss#L9

Since there is an existing `mat-sys-scrim` token for this exact purpose I recommend it be used for customization purposes and for the ability to account for light and dark themes.

### Reproduction

https://material.angular.dev/components/dialog/overview

### Expected Behavior

`mat-sys-scrim` token is used for scrims

### Actual Behavior

Hardcoded 32% opacity black value is used for the scrim

### Environment

- Angular: v22
- CDK/Material: v22
- Browser(s): any
- Operating System (e.g. Windows, macOS, Ubuntu): any

Contributor guide

Open the contributing guide

Research direction

Start with src/cdk/overlay/_index.scss at the referenced backdrop styling and inspect the Angular Material dialog overview reproduction. Trace how the dialog overlay receives its scrim styling and verify whether the existing mat-sys-scrim token is available there. Done means the default scrim uses mat-sys-scrim while preserving the expected dialog behavior in light and dark themes.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, scss, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.