angular / angular/components

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

Open
#30,856 5 comments 1 reaction 0 assignees View on GitHub
area: material/button P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

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

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and compare the dark-theme mat-raised-button behavior with the Angular Material v16 example. Inspect the button styling and elevation behavior involved in the reproduction, then verify that dark-mode buttons have visible contrast and elevation without regressing the light theme.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.