Poor contrast with elevation(box-shadow) with dark theme

89 views
Skip to first unread message

Saisurya Kattamuri

unread,
Jul 15, 2020, 1:21:22 AM7/15/20
to angular-material2
We're using "Pink and blue grey" dark theme for one of our sites and found that contrast is poor for elevations and box-shadows compared to light theme.

For mat-elevation same shade is used in light and dark themes

pink-and-bluegrey
.mat-elevation-z8 {
box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)
}

deep-purple-amber
.mat-elevation-z8 {
box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
}

Shouldn't it be more darker shadow for dark themes to create the shadow elevation...

Here's the diff with rgba(0,0,0,.75)

with default rgba(0,0,0,.14)


Please advise if this is on par with material guidelines....

Thanks

Saisurya Kattamuri

unread,
Jul 15, 2020, 1:39:20 AM7/15/20
to angular-material2
Images are rendered in the original post
===================================
Current implementation

with increased darkness

Reply all
Reply to author
Forward
0 new messages