Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
1 task done
melroy89 opened this issue Apr 12, 2025 · 0 comments
Open
1 task done
Labels
needs triage This issue needs to be triaged by the team

Comments

@melroy89
Copy link

melroy89 commented Apr 12, 2025

Is this a regression?

  • 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

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

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

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

Environment

  • Angular: 19.2.6
  • CDK/Material: 19.2.6
  • Browser(s): Firefox
  • Operating System (e.g. Windows, macOS, Ubuntu): Linux Mint (Ubuntu)
@melroy89 melroy89 added the needs triage This issue needs to be triaged by the team label Apr 12, 2025
@melroy89 melroy89 changed the title bug(mat-button): Low contrast on buttons in dark mode using Angular Material 18/19 bug(mat-raised-button): Low contrast on buttons in dark mode using Angular Material 18/19 Apr 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs triage This issue needs to be triaged by the team
Projects
None yet
Development

No branches or pull requests

1 participant