/* 暗色模式 CSS 变量 */ :root { --sidebar-bg: #1e293b; --sidebar-header-bg: #0f172a; --sidebar-hover-bg: #334155; --sidebar-text: #94a3b8; --sidebar-active-text: #fff; --sidebar-active-bg: #3b82f6; --header-bg: #ffffff; --header-border: #e2e8f0; --header-text: #1e293b; --main-bg: #f8fafc; --main-text: #1e293b; --footer-bg: #ffffff; --footer-border: #e2e8f0; --footer-text: #64748b; } html.dark { --sidebar-bg: #0f172a; --sidebar-header-bg: #020617; --sidebar-hover-bg: #1e293b; --sidebar-text: #cbd5e1; --sidebar-active-text: #fff; --sidebar-active-bg: #3b82f6; --header-bg: #1e293b; --header-border: #334155; --header-text: #f1f5f9; --main-bg: #0f172a; --main-text: #f1f5f9; --footer-bg: #1e293b; --footer-border: #334155; --footer-text: #cbd5e1; } /* 基础样式 */ body { color: var(--main-text); background-color: var(--main-bg); } /* ========== Element Plus 暗色模式全局覆盖 ========== */ /* 输入框、文本框、选择器 */ html.dark .el-input__inner, html.dark .el-textarea__inner, html.dark .el-select .el-input__inner, html.dark .el-cascader .el-input__inner { color: var(--header-text) !important; background-color: var(--header-bg) !important; border-color: var(--header-border) !important; } /* 选择器下拉项 */ html.dark .el-select-dropdown__item { color: var(--header-text) !important; } html.dark .el-select-dropdown__item.selected { color: var(--sidebar-active-text) !important; background-color: var(--sidebar-active-bg) !important; } html.dark .el-select-dropdown__item.hover { background-color: var(--sidebar-hover-bg) !important; } /* 表单标签 */ html.dark .el-form-item__label { color: var(--header-text) !important; } /* 表格 */ html.dark .el-table { color: var(--header-text); } html.dark .el-table th { background-color: var(--header-bg); color: var(--header-text); } html.dark .el-table tr { background-color: var(--header-bg); } html.dark .el-table td { color: var(--header-text); } /* 卡片 */ html.dark .el-card { background-color: var(--header-bg); color: var(--header-text); } html.dark .el-card .el-card__header { border-bottom-color: var(--header-border); } /* 标签 */ html.dark .el-tag { background-color: var(--sidebar-bg) !important; border-color: var(--header-border) !important; color: var(--header-text) !important; } /* 按钮文字颜色 */ html.dark .el-button--default { color: var(--header-text); background-color: var(--header-bg); border-color: var(--header-border); } html.dark .el-button--primary { background-color: var(--sidebar-active-bg) !important; border-color: var(--sidebar-active-bg) !important; color: #fff !important; } /* 级联选择器、日期选择器等 */ html.dark .el-cascader .el-input__inner, html.dark .el-date-editor .el-input__inner { color: var(--header-text) !important; background-color: var(--header-bg) !important; border-color: var(--header-border) !important; } /* 占位符 */ html.dark .el-input__inner::placeholder { color: var(--footer-text) !important; }