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

[Osama-ML]

Is there an existing issue for this feature?

• 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]

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