angular / angular/components

bug(mat-raised-button): Low contrast on buttons in dark mode using Angular Material 18/19

オープン
#30,856 コメント 5 件 リアクション 1 件 担当者 0 名 GitHub で見る
area: material/button P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

### 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

Angular Material v16

### Description

Using Angular Material 17, 18 and 19 (so Material 3) on a _dark theme_ (eg. Cyan & Orange) its **very hard to see that mat-raised-button is actually is a button**...

![Image](https://github.com/user-attachments/assets/a2f844c9-375c-40e0-9ad3-05f1854f1deb)

Link to this example: https://material.angular.io/components/table/examples#table-dynamic-array-data

While on a _light theme_, there is enough contrast and drop-shadow on a light background, that you can easily see its indeed a raised button:

![Image](https://github.com/user-attachments/assets/644e0c73-af52-40e8-b90a-3edbdad3bdbe)

### Reproduction

StackBlitz link: https://stackblitz.com/run?file=src%2Fapp%2Ftable-dynamic-array-data-example.ts

Be sure to select dark theme in the stackblitz. Its basically your official example: https://material.angular.io/components/table/examples#table-dynamic-array-data

### Expected Behavior

I would expect to have more contrast with the raised button on the background using dark mode, so you can see at least the outline better. The drop-shadow is of course not working either in dark mode, so that is not helping.

What about a lighter drop-shadow effect?? Since you can't have a dark drop-shadow on a black background. Could this be `--mdc-protected-button-container-elevation-shadow`?

See for example how it used to be in Angular **Material v16**: https://v16.material.angular.io/components/table/examples#table-dynamic-array-data

![Image](https://github.com/user-attachments/assets/e56031b3-675c-4169-a538-b51eae22a7b4)

### Actual Behavior

No contrast on the dark mat-raised-button on a dark background (aka dark mode), you can not even see that it is a raised button in the first place. See again:

![Image](https://github.com/user-attachments/assets/a2f844c9-375c-40e0-9ad3-05f1854f1deb)

### Environment

- Angular: 19.2.6
- CDK/Material: 19.2.6
- Browser(s): Firefox
- Operating System (e.g. Windows, macOS, Ubuntu): Linux Mint (Ubuntu)

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

リンクされた StackBlitz の再現から始め、dark-theme における mat-raised-button の動作を Angular Material v16 の例と比較します。再現に関係するボタンのスタイルと elevation の動作を調査し、その後、light theme にリグレッションを生じさせることなく、dark-mode のボタンに視認できるコントラストと elevation があることを確認します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
accessibility, design, frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
活発
明瞭さ
おおむね明確
初心者へのやさしさ
55/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。