[feature][UX Improvement]: Tooltip/Word-Popover in darkmode color contrast

quran / quran.com-frontend-next

Frontend build on next.js

https://quran.com

1.37k stars 398 forks source link

[feature][UX Improvement]: Tooltip/Word-Popover in darkmode color contrast #2145

Open Osama-ML opened 5 months ago

Osama-ML commented 5 months ago

Is there an existing issue for this feature?

[X] There is no exsiting issue for this feature

Summary

Asalamu3aikum

When you are reading some surat with the tab "Reading" and click in a word, and the tooltip/word-popover shows, in light te box-shadow is very useful to see the shape of the box

But in Darkmode its difficult:

Your purposed solution for this feature

I have two suggestions

1) Change the div background and the svg fill colors in darkmode

2) Change box-shadow color in darkmode

IlijazM commented 5 months ago

Alejkum Salam. I personally agree and I like the redesign in the first picture. It makes it easier for the eyes to recognize the popover and it would increase the accessibility of it, I love to see that implemented.

The box shadow in the second image however is not recommended in most style guidelines. A dark shadow would be a too low contrast on the background in dark mode and a light glow doesn't give the impression of elevation and just looks off. Here are some resources about this topic:

https://m2.material.io/design/color/dark-theme.html https://medium.com/@tundehercules/designing-effective-dark-mode-interfaces-17f38ecea2e9