ant-design < Card /> doesn't look good under dark theme with bordered={false} or hoverable

sh7euo9m  于 8个月前  发布在  Go
关注(0)|答案(7)|浏览(170)

https://stackblitz.com/edit/vitejs-vite-6gj9cp?file=src%2FApp.tsx

Steps to reproduce

View the reproduction

What is expected?

Shadow color should be changed under dark algorithm, since the background color is likely to be nearly black.

What is actually happening?

Shadow color is the same as in default algorithm, which is for light background.
| Environment | Info |
| ------------ | ------------ |
| antd | 5.13.2 |
| React | 18.2.0 |
| System | Windows 11 |
| Browser | Chrome 120 |

This might not only happen to <Card /> , worth a look for all components using such shadow color in dark mode.

eeq64g8w

eeq64g8w2#

Seems like boxShadow from theme.useToken() is not changed at all in the theme.darkAlgorithm . Might need to look into this?

iovurdzv

iovurdzv3#

这种背景颜色一样的时候, 完全就分不清边界🤣
亮色有合理的boxShadow就没有这个问题

zwghvu4y

zwghvu4y4#

需要在设计层面给个解决方案。

t2a7ltrp

t2a7ltrp5#

像youtube这种就可以,同样的暗色卡片/modal,给个更深的阴影就行了,至少能稍微盖住周围的其他颜色的东西。

csga3l58

csga3l586#

how?

chy5wohz

chy5wohz7#

bump

相关问题