angular / angular/components

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

Ouverte
#33,578 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

area: cdk/overlay gemini-triaged P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
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

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par le style du backdrop référencé dans src/cdk/overlay/_index.scss et examinez la reproduction de la vue d’ensemble des dialogs d’Angular Material. Suivez la façon dont l’overlay du dialog reçoit son style de scrim et vérifiez si le token mat-sys-scrim existant y est disponible. Le travail est terminé lorsque le scrim par défaut utilise mat-sys-scrim tout en conservant le comportement attendu du dialog dans les thèmes clair et sombre.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, scss, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
68/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.