Dark mode shadow

[allistairlee]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

When dark mode is enabled (data-bs-theme="dark"), shadows remain black, which makes it difficult to see.

Reduced test cases

https://codepen.io/allistairlee/pen/ZEmgMaq

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

No response

What version of Bootstrap are you using?

5.3.1

[mdo]

We had them go white for dark mode, but it was a little wonky looking. Dark mode's shadows could just be darker, but that's still something to flesh out more. Open to suggestions in a PR.

[Rabadash8820]

Just ran into this myself. I was reading around for recommendations and found this helpful Atmos blog article, with the following advice for communicating depth/elevation:

In light mode, we usually use shadows to communicate depth. The higher the surface is, the closer it is to the light source and the bigger shadow it casts. While this approach wouldn't work in a dark mode, we can use the same "light source" theory and apply it to the surface color.

So instead of changing only the shadow size, we can also make the surface lighter the higher it is. Think about the light source being closer and shining brighter on the surface.

with the great comparison image shown below. So maybe Bootstrap could take a similar approach. I certainly find the dark theme shadows in this image (even the "lowest" ones) to pop a lot more than the current Bootstrap dark theme ones.