diff --git a/src/components/ThemePicker/ThemePicker.vue b/src/components/ThemePicker/ThemePicker.vue index e4eb633..cb7b5ac 100644 --- a/src/components/ThemePicker/ThemePicker.vue +++ b/src/components/ThemePicker/ThemePicker.vue @@ -139,31 +139,41 @@ function pick(value: string) { border-top: 1px solid var(--border); } -/* ===== W5.x.x+1: 暗主题下主题弹窗文字糊(红框 2)强制覆盖 ===== - EP 2.x 的 el-popover 实际读 --el-popper-bg-color(popper ≠ popover), - tokens.scss 已加 6 个 popper 变量,这里再补 :deep() 保险: - scoped 选择器对 teleport 出去的内容穿透,EP 弹窗会被 popper - 容器包裹,所以 :deep() 也得穿透 */ -:deep(.el-popper.is-light) { +/* ===== W5.x.x+1 v3: 暗主题下主题弹窗糊(红框 2)修根因 ===== + 根因: scoped :deep() 在 dist 里编译成 [data-v-xxx] 前缀选择器, + 但 EP el-popper 容器是组件内子元素,vue scoped 没给它加 data-v 属性 + (实测 className = "el-popper is-light el-tooltip el-popover"), + 所以 [data-v-xxx] .el-popper.is-light { ... !important } 根本匹配不到。 + 另: EP 弹窗实际背景读 --el-popper-bg-color-light(不是 --el-popper-bg-color), + tokens.scss 已加 light 版。修法: 用 :global() 写无 scoped 的全局规则。 */ +:global(.el-popper.is-light) { background: var(--surface) !important; border-color: var(--border) !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); } -/* 兜底: 暗主题下即使弹窗白底, 内部也用深色字 */ -[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) { +:global(.el-popper.is-light .el-popper__arrow::before) { background: var(--surface) !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; } diff --git a/src/theme/tokens.scss b/src/theme/tokens.scss index 4bd4ad1..f28cd79 100644 --- a/src/theme/tokens.scss +++ b/src/theme/tokens.scss @@ -70,15 +70,21 @@ --el-popover-bg-color: var(--surface); --el-popover-border-color: var(--border); // ===== Element Plus Popper 容器(W5.x.x+1: 补 W5.x.x 漏的 popper bg) ===== - // EP 2.x 实际读的是 --el-popper-bg-color(popper ≠ popover),W5.x.x 漏覆盖 - // 导致 el-popover / el-tooltip / el-dropdown / el-select-dropdown 等 - // 在暗主题下用 EP 默认亮色背景(色差反了) + // EP 2.x 弹窗实际读 --el-popper-bg-color-light(不是 --el-popper-bg-color) + // W5.x.x+1 v3 修根因: tokens 全部重定向到主题色,确保 dark 主题下弹窗是深底 --el-popper-bg-color: var(--surface); + --el-popper-bg-color-light: var(--surface); --el-popper-border-color: var(--border); --el-popper-title-text-color: var(--ink); --el-popper-arrow-bg-color: var(--surface); --el-popper-plain-bg-color: var(--surface); --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-dropdown-bg-color: var(--surface); --el-dropdown-border-color: var(--border);