Skip to content

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

Description

@kainiedziela

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:

$overlay-backdrop-color: rgba(0, 0, 0, 0.32) !default;

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: cdk/overlaygemini-triagedLabel noting that an issue has been triaged by geminineeds triageThis issue needs to be triaged by the team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions