diff --git a/src/components/ThemePicker/ThemePicker.vue b/src/components/ThemePicker/ThemePicker.vue index 7a26426..e4eb633 100644 --- a/src/components/ThemePicker/ThemePicker.vue +++ b/src/components/ThemePicker/ThemePicker.vue @@ -84,7 +84,7 @@ function pick(value: string) { .rr-theme-picker-title { font-size: 12px; font-weight: 600; - color: var(--ink-2); + color: var(--ink-2) !important; padding: 8px 8px 12px; letter-spacing: 0.02em; } @@ -124,17 +124,17 @@ function pick(value: string) { .rr-theme-name { font-size: 13px; font-weight: 500; - color: var(--ink); + color: var(--ink) !important; } .rr-theme-item.active .rr-theme-name { - color: var(--brand); + color: var(--brand) !important; font-weight: 600; } .rr-theme-hint { margin-top: 8px; padding: 8px 8px 0; font-size: 11px; - color: var(--ink-3); + color: var(--ink-3) !important; text-align: center; border-top: 1px solid var(--border); } @@ -149,6 +149,16 @@ function pick(value: string) { border-color: var(--border) !important; color: var(--ink) !important; } +/* 兜底: 暗主题下即使弹窗白底, 内部也用深色字 */ +[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; border-color: var(--border) !important;