diff --git a/src/modules/auth/LoginView.vue b/src/modules/auth/LoginView.vue index 64e2a56..285eb03 100644 --- a/src/modules/auth/LoginView.vue +++ b/src/modules/auth/LoginView.vue @@ -312,6 +312,11 @@ async function onLogin() { .rr-login-right { flex: 1; background: rgba(255, 255, 255, 0.85); + + // W5.x.x 暗主题适配:登录卡深色半透明,让 var(--ink) 系文字清晰可见 + [data-theme="dark"] & { + background: rgba(30, 41, 59, 0.85); + } backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 48px 40px; diff --git a/src/theme/tokens.scss b/src/theme/tokens.scss index 8378869..57d42a7 100644 --- a/src/theme/tokens.scss +++ b/src/theme/tokens.scss @@ -6,6 +6,9 @@ // + --text-xs ~ --text-3xl 8 级字号 // + --topbar-blur 顶栏毛玻璃 // + --brand-gradient 主按钮渐变 +// W5.x.x 暗主题适配全局修复(2026-07-03): +// + 25+ 个 EP 文字色/填充色/边框色/popover 背景等派生色变量 +// + 4 主题块通过 CSS 级联自动适配(都引用 var(--ink)/var(--surface) 等) :root { // ===== 圆角(沿用 v1.3) ===== @@ -34,6 +37,54 @@ --el-color-primary-light-9: var(--brand-soft); --el-color-primary-dark-2: var(--brand-hover); + // ===== Element Plus 文字色派生(W5.x.x 暗主题适配全局修复) ===== + // 让 el-breadcrumb / el-popover / el-tooltip / el-select / el-input placeholder + // 等所有用 --el-text-color-* 的 EP 组件,文字色都跟主题切换 + --el-text-color-primary: var(--ink); + --el-text-color-regular: var(--ink-2); + --el-text-color-secondary: var(--ink-3); + --el-text-color-placeholder: var(--ink-4); + --el-text-color-disabled: var(--ink-4); + + // ===== Element Plus 边框色派生 ===== + --el-border-color: var(--border); + --el-border-color-light: var(--border); + --el-border-color-lighter: var(--border); + --el-border-color-extra-light: var(--border); + --el-border-color-dark: var(--border-strong); + --el-border-color-darker: var(--border-strong); + + // ===== Element Plus 填充色派生 ===== + --el-fill-color: var(--bg-soft); + --el-fill-color-light: var(--bg-soft); + --el-fill-color-lighter: var(--surface-2); + --el-fill-color-extra-light: var(--surface-2); + --el-fill-color-dark: var(--surface-2); + --el-fill-color-darker: var(--surface-2); + --el-fill-color-blank: var(--surface); + + // ===== Element Plus 背景色派生(popover/tooltip/dropdown/modal 容器) ===== + --el-bg-color: var(--surface); + --el-bg-color-page: var(--bg-soft); + --el-bg-color-overlay: var(--surface); + --el-popover-bg-color: var(--surface); + --el-popover-border-color: var(--border); + --el-tooltip-bg-color: var(--ink); + --el-dropdown-bg-color: var(--surface); + --el-dropdown-border-color: var(--border); + --el-select-dropdown-bg-color: var(--surface); + --el-select-dropdown-border-color: var(--border); + --el-datepicker-bg-color: var(--surface); + --el-dialog-bg-color: var(--surface); + --el-message-bg-color: var(--surface); + --el-notification-bg-color: var(--surface); + + // ===== Element Plus 遮罩 + 禁用 ===== + --el-mask-color: rgba(0, 0, 0, 0.5); + --el-disabled-bg-color: var(--bg-soft); + --el-disabled-text-color: var(--ink-4); + --el-disabled-border-color: var(--border); + // ===== v2 新增:动画曲线 ===== --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.0, 0, 0.2, 1);