[Style] [card, input] 背景色修改后导致输入框在卡片组件中使用样式发生变化

[WangJincheng4869]

Bug Type: Style

Environment

• Vue Version: 3.5.25
• Element Plus Version: 2.12.0
• Browser / OS: UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:137.0) Gecko/20100101 Firefox/137.0
• Build Tool: Vite

Reproduction

Related Component

• el-card
• el-input

Reproduction Link

Element Plus Playground

Steps to reproduce

查看 demo

What is Expected?

与之前的行为相同，输入框的背景色与卡片相同。

What is actually happening?

输入框的背景色比卡片黑

Additional comments

(empty)

[lw56777]

和el-card没关系 2.12.0版本改颜色了

[WangJincheng4869]

和el-card没关系 2.12.0版本改颜色了

是的，但是改了之后与 card 的背景色不适配了

[btea]

It looks related to #10890. cc @tolking @Dsaquel @kooriookami

[Dsaquel]

In dark mode, the background-color indeed changed from transparent to an opaque color resulting to not inheriting the color of the element behind.

Actually, we're not sure why it was designed with transparent from the beginning but passing from an opaque color will:

1. Fix the original issue where some elements are collapsing them self with absolute positionning in dark mode, before demo.
2. It will make the style more coherent as it will only have one color all the time (just like light mode):

   Before	After

To revert back with the previous style you can change the blank variable specifically like this: demo

html.dark .el-card {
  --el-fill-color-blank: transparent
}

That said I'm not sure how much the change is that important in real word 👀 .

[kooriookami]

May be we can change the dark bg of card to #141414

[tolking]

html.dark .el-card {
  --el-card-bg-color: var(--el-bg-color-overlay);
}

I do not know why the background of the Card is rewritten as --el-bg-color-overlay in dark mode.

I feel this was added because previously --el-fill-color-blank was transparent, and it was done to prevent the cards from having no background.

Perhaps we can remove the related styles now, so that the style is more consistent.

[Dsaquel]

Do you have an idea regarding the background of the card component ? @YunYouJun https://github.com/element-plus/element-plus/pull/6975

[tolking]

I have found that the content area based on the Tooltip component has similar issues.

Perhaps the best solution right now is to rewrite these styles, such as:

html.dark .el-card,
html.dark .el-popper {
  --el-fill-color-blank: var(--el-bg-color-overlay);
}