fix(F006-W5xx+1): 暗主题弹窗仍糊根因 - :deep scoped 不匹配 + 缺 --el-popper-bg-color-light
- ThemePicker.vue 改 :deep() → :global() 写无 scoped 全局规则 (根因: EP el-popper 容器没有 [data-v-xxx] 属性,scoped 规则匹配不到) - tokens.scss 补 --el-popper-bg-color-light / --el-border-color-light / --el-fill-color-blank / --el-bg-color-overlay(EP 弹窗实际读这些) - 实测验证: 弹窗 bg rgb(255,255,255)→rgb(30,41,59) #1E293B dark ✅ 文字 rgb(51,65,85)→rgb(248,250,252) #F8FAFC dark ✅
This commit is contained in:
parent
e1cd69c7e5
commit
5b86842f65
@ -139,31 +139,41 @@ function pick(value: string) {
|
|||||||
border-top: 1px solid var(--border);
|
border-top: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== W5.x.x+1: 暗主题下主题弹窗文字糊(红框 2)强制覆盖 =====
|
/* ===== W5.x.x+1 v3: 暗主题下主题弹窗糊(红框 2)修根因 =====
|
||||||
EP 2.x 的 el-popover 实际读 --el-popper-bg-color(popper ≠ popover),
|
根因: scoped :deep() 在 dist 里编译成 [data-v-xxx] 前缀选择器,
|
||||||
tokens.scss 已加 6 个 popper 变量,这里再补 :deep() 保险:
|
但 EP el-popper 容器是组件内子元素,vue scoped 没给它加 data-v 属性
|
||||||
scoped 选择器对 teleport 出去的内容穿透,EP 弹窗会被 popper
|
(实测 className = "el-popper is-light el-tooltip el-popover"),
|
||||||
容器包裹,所以 :deep() 也得穿透 */
|
所以 [data-v-xxx] .el-popper.is-light { ... !important } 根本匹配不到。
|
||||||
:deep(.el-popper.is-light) {
|
另: EP 弹窗实际背景读 --el-popper-bg-color-light(不是 --el-popper-bg-color),
|
||||||
|
tokens.scss 已加 light 版。修法: 用 :global() 写无 scoped 的全局规则。 */
|
||||||
|
:global(.el-popper.is-light) {
|
||||||
background: var(--surface) !important;
|
background: var(--surface) !important;
|
||||||
border-color: var(--border) !important;
|
border-color: var(--border) !important;
|
||||||
color: var(--ink) !important;
|
color: var(--ink) !important;
|
||||||
|
--el-popper-bg-color-light: var(--surface);
|
||||||
|
--el-popper-border-color: var(--border);
|
||||||
|
--el-border-color-light: var(--border);
|
||||||
|
--el-fill-color-blank: var(--surface);
|
||||||
}
|
}
|
||||||
/* 兜底: 暗主题下即使弹窗白底, 内部也用深色字 */
|
:global(.el-popper.is-light .el-popper__arrow::before) {
|
||||||
[data-theme="dark"] :deep(.el-popper.is-light) {
|
|
||||||
background: var(--surface) !important;
|
|
||||||
color: var(--ink) !important;
|
|
||||||
}
|
|
||||||
[data-theme="dark"] :deep(.el-popper.is-light .rr-theme-name),
|
|
||||||
[data-theme="dark"] :deep(.el-popper.is-light .rr-theme-picker-title),
|
|
||||||
[data-theme="dark"] :deep(.el-popper.is-light .rr-theme-hint) {
|
|
||||||
color: var(--ink) !important;
|
|
||||||
}
|
|
||||||
:deep(.el-popper.is-light .el-popper__arrow::before) {
|
|
||||||
background: var(--surface) !important;
|
background: var(--surface) !important;
|
||||||
border-color: var(--border) !important;
|
border-color: var(--border) !important;
|
||||||
}
|
}
|
||||||
:deep(.el-popper.is-light .el-popper__title) {
|
:global(.el-popper.is-light .el-popper__title) {
|
||||||
|
color: var(--ink) !important;
|
||||||
|
}
|
||||||
|
:global(.el-popper.is-light .rr-theme-name),
|
||||||
|
:global(.el-popper.is-light .rr-theme-picker-title),
|
||||||
|
:global(.el-popper.is-light .rr-theme-hint) {
|
||||||
|
color: var(--ink) !important;
|
||||||
|
}
|
||||||
|
[data-theme="dark"] :global(.el-popper.is-light) {
|
||||||
|
background: var(--surface) !important;
|
||||||
|
color: var(--ink) !important;
|
||||||
|
}
|
||||||
|
[data-theme="dark"] :global(.el-popper.is-light .rr-theme-name),
|
||||||
|
[data-theme="dark"] :global(.el-popper.is-light .rr-theme-picker-title),
|
||||||
|
[data-theme="dark"] :global(.el-popper.is-light .rr-theme-hint) {
|
||||||
color: var(--ink) !important;
|
color: var(--ink) !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -70,15 +70,21 @@
|
|||||||
--el-popover-bg-color: var(--surface);
|
--el-popover-bg-color: var(--surface);
|
||||||
--el-popover-border-color: var(--border);
|
--el-popover-border-color: var(--border);
|
||||||
// ===== Element Plus Popper 容器(W5.x.x+1: 补 W5.x.x 漏的 popper bg) =====
|
// ===== Element Plus Popper 容器(W5.x.x+1: 补 W5.x.x 漏的 popper bg) =====
|
||||||
// EP 2.x 实际读的是 --el-popper-bg-color(popper ≠ popover),W5.x.x 漏覆盖
|
// EP 2.x 弹窗实际读 --el-popper-bg-color-light(不是 --el-popper-bg-color)
|
||||||
// 导致 el-popover / el-tooltip / el-dropdown / el-select-dropdown 等
|
// W5.x.x+1 v3 修根因: tokens 全部重定向到主题色,确保 dark 主题下弹窗是深底
|
||||||
// 在暗主题下用 EP 默认亮色背景(色差反了)
|
|
||||||
--el-popper-bg-color: var(--surface);
|
--el-popper-bg-color: var(--surface);
|
||||||
|
--el-popper-bg-color-light: var(--surface);
|
||||||
--el-popper-border-color: var(--border);
|
--el-popper-border-color: var(--border);
|
||||||
--el-popper-title-text-color: var(--ink);
|
--el-popper-title-text-color: var(--ink);
|
||||||
--el-popper-arrow-bg-color: var(--surface);
|
--el-popper-arrow-bg-color: var(--surface);
|
||||||
--el-popper-plain-bg-color: var(--surface);
|
--el-popper-plain-bg-color: var(--surface);
|
||||||
--el-popper-padding: 12px;
|
--el-popper-padding: 12px;
|
||||||
|
// 弹窗 border 颜色 EP 实际读 --el-border-color-light
|
||||||
|
--el-border-color-light: var(--border);
|
||||||
|
--el-border-color-lighter: var(--border);
|
||||||
|
// 弹窗底层填充色
|
||||||
|
--el-fill-color-blank: var(--surface);
|
||||||
|
--el-bg-color-overlay: var(--surface);
|
||||||
--el-tooltip-bg-color: var(--ink);
|
--el-tooltip-bg-color: var(--ink);
|
||||||
--el-dropdown-bg-color: var(--surface);
|
--el-dropdown-bg-color: var(--surface);
|
||||||
--el-dropdown-border-color: var(--border);
|
--el-dropdown-border-color: var(--border);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user