/* 主题变量定义 - 支持动态切换 */ :root { /* 默认深色主题变量 */ --theme-primary: #43a1ff; --theme-success: #67c23a; --theme-warning: #e6a23c; --theme-danger: #f56c6c; --theme-error: #f56c6c; --theme-info: #909399; /* 文本颜色 */ --theme-text-primary: #f0f0f0; --theme-text-regular: #f0f0f0; --theme-text-secondary: #c0c8d0; --theme-text-placeholder: #c0c4cc; --theme-attachment-tips-text: #c0c4cc; --theme-message-box-title: #ffffff; --theme-message-box-message: #c0c8d0; /* 背景颜色 */ --theme-bg-primary: #0f304f; --theme-bg-secondary: #114066; --theme-bg-tertiary: #0f3a5c; --theme-bg-quaternary: #0e3555; --theme-bg-quinary: #1a4a72; --theme-header-bg: #114066; /* 边框颜色 */ --theme-border-primary: #43a1ff; --theme-border-tertiary: rgba(67, 161, 255, 0.3); --theme-border-input: rgba(67, 161, 255, 0.3); --theme-border-descriptions: #165799; /* 菜单颜色 */ --theme-menu-bg: #393a40; --theme-menu-text: #303133; --theme-menu-active: #616166; --theme-menu-title: #9fcfff; /* 系统颜色 */ --theme-system-bg: #0f304f; --theme-system-module-1: #114066; --theme-system-module-2: #0f3a5c; --theme-system-module-3: #0e3555; --theme-system-module-4: #1a4a72; --theme-system-active-bg: #0a2a45; --theme-system-input-bg: #114066; --theme-system-disabled-bg: #1e4f7a; --theme-system-table-text: #303133; --theme-select-title-bg: #0f3a5c; --theme-select-title-text: #ffffff; --theme-search-common-bg: #f5f7fa; --theme-search-common-border: rgba(67, 161, 255, 0.5); --theme-switch-border-color: #1e4f7a; --theme-switch-bg-color: #1e4f7a; --theme-add-condition-hover: #00ffff; --theme-remove-icon: #caecfd; --theme-text-inverse: #ffffff; --theme-tag-info-bg: rgb(7 95 166); --theme-form-label: #f0f0f0; --theme-loading-mask-bg: rgba(10, 38, 61, 0.9); /* 输入组颜色 */ --theme-input-group-bg: #0e3555; --theme-input-group-text: #00ffff; --theme-input-group-border: #43a1ff30; /* Element Plus 保持默认颜色 - 不覆盖 */ --el-color-primary: #409eff; --el-color-success: #67c23a; --el-color-warning: #e6a23c; --el-color-danger: #f56c6c; --el-color-error: #f56c6c; --el-color-info: #909399; --el-text-color-primary: #303133; --el-text-color-regular: #606266; --el-text-color-secondary: #909399; --el-text-color-placeholder: #a8abb2; --el-text-color-disabled: #c0c4cc; --el-border-color: #dcdfe6; --el-border-color-light: #e4e7ed; --el-border-color-lighter: #ebeef5; --el-border-color-extra-light: #f2f6fc; --el-fill-color: #f0f2f5; --el-fill-color-light: #f5f7fa; --el-fill-color-lighter: #fafafa; --el-fill-color-extra-light: #fafcff; --el-fill-color-blank: #ffffff; --el-bg-color: #ffffff; --el-bg-color-page: #f2f3f5; --el-bg-color-overlay: #ffffff; } /* 浅色主题 */ .theme-white { --theme-header-container-bg: linear-gradient(180deg, #d9e8ff 0%, #ffffff 100%), #f0f4fa; --theme-bg-custom: #1D558F20; --theme-search-wrapper-bg: #ffffff; --theme-page-line-border: #E6E6E6; --theme-collapse-header-bg: #EEEEEE; --theme-edit-add-detail-bg: #1D558F20; --theme-form-content-bg: #ffffff; --theme-collapse-wrap-border: #f5f7fa; --theme-select-placeholder-color: #000000; --theme-more-message-color: #000000; --theme-radio-bg: #ffffff; --theme-table-cell-bg: #EEEEEE; --theme-table-striped-bg: #FFFFFF; --theme-table-row-cell-bg: #FAFAFA; --theme-cascader-text-color: #000000; --theme-divider-text-bg: #ffffff; --theme-primary: #409eff; --theme-success: #67c23a; --theme-warning: #e6a23c; --theme-danger: #f56c6c; --theme-error: #f56c6c; --theme-info: #909399; /* 文本颜色 - 浅色主题使用黑色 */ --theme-text-primary: #303133; --theme-text-regular: #606266; --theme-text-secondary: #909399; --theme-text-placeholder: #c0c4cc; --theme-attachment-tips-text: #000000; --theme-message-box-title: #000000; --theme-message-box-message: #E6A23C; /* 背景颜色 - 浅色主题使用白色系 */ --theme-bg-primary: #90939910; --theme-bg-secondary: #f5f7fa; --theme-bg-tertiary: #f0f2f5; --theme-bg-quaternary: #e4e7ed; --theme-bg-quinary: #dcdfe6; --theme-header-bg: #0063b0; /* 边框颜色 */ --theme-border-primary: #dcdfe6; --theme-border-secondary: #e4e7ed; --theme-border-tertiary: #ebeef5; --theme-border-divider: #dcdfe6; --theme-border-input: #dcdfe6; --theme-border-descriptions: #dcdfe6; /* 菜单颜色 */ --theme-menu-bg: #ffffff; --theme-menu-text: #ffffff; --theme-menu-active: #409eff; --theme-menu-hover: #f5f7fa; --theme-menu-title: #0063b0; /* 系统颜色 */ --theme-system-bg: #ffffff; --theme-system-module-1: #f5f7fa; --theme-system-module-2: #ffffff; --theme-system-module-3: #ffffff; --theme-system-module-4: #dcdfe6; --theme-system-active-bg: #ecf5ff; --theme-system-input-bg: #ffffff; --theme-system-disabled-bg: #f5f7fa; --theme-system-table-text: #303133; --theme-select-title-bg: #ffffff; --theme-select-title-text: #303133; --theme-search-common-bg: #ffffff; --theme-search-common-border: #ffffff; --theme-switch-border-color: #EEEEEE; --theme-switch-bg-color: #EEEEEE; --theme-add-condition-hover: #0063b0; --theme-remove-icon: #409eff; --theme-text-inverse: #000000; --theme-tag-info-bg: #409eff; --theme-form-label: #000000; --theme-loading-mask-bg: #90939920; /* 输入组颜色 */ --theme-input-group-bg: #f5f7fa; --theme-input-group-text: #999999; --theme-input-group-border: #ebeef5; /* Element Plus 保持默认颜色 - 不覆盖 */ --el-color-primary: #409eff; --el-color-success: #67c23a; --el-color-warning: #e6a23c; --el-color-danger: #f56c6c; --el-color-error: #f56c6c; --el-color-info: #909399; --el-text-color-primary: #303133; --el-text-color-regular: #606266; --el-text-color-secondary: #909399; --el-text-color-placeholder: #a8abb2; --el-text-color-disabled: #c0c4cc; --el-border-color: #dcdfe6; --el-border-color-light: #e4e7ed; --el-border-color-lighter: #ebeef5; --el-border-color-extra-light: #f2f6fc; --el-fill-color: #f0f2f5; --el-fill-color-light: #f5f7fa; --el-fill-color-lighter: #fafafa; --el-fill-color-extra-light: #fafcff; --el-fill-color-blank: #ffffff; --el-bg-color: #ffffff; --el-bg-color-page: #f2f3f5; --el-bg-color-overlay: #ffffff; } /* 深色主题 */ .theme-blue { --theme-header-container-bg: linear-gradient(180deg, #114066 0%, #0f304f 100%); --theme-bg-custom: #0f304f; --theme-search-wrapper-bg: #114066; --theme-page-line-border: #165799; --theme-collapse-header-bg: #145080; --theme-edit-add-detail-bg: #0f304f; --theme-form-content-bg: #114066; --theme-collapse-wrap-border: #165799; --theme-select-placeholder-color: #f0f0f0; --theme-more-message-color: #dfebfc; --theme-radio-bg: #0e3555; --theme-table-cell-bg: #0e3555; --theme-table-striped-bg: #114066; --theme-table-row-cell-bg: #114066; --theme-cascader-text-color: #ffffff; --theme-divider-text-bg: #114066; --theme-primary: #43a1ff; --theme-success: #67c23a; --theme-warning: #e6a23c; --theme-danger: #f56c6c; --theme-error: #f56c6c; --theme-info: #909399; /* 文本颜色 - 深色主题使用白色 */ --theme-text-primary: #f0f0f0; --theme-text-regular: #f0f0f0; --theme-text-secondary: #c0c8d0; --theme-text-placeholder: #c0c4cc; /* 背景颜色 - 深色主题使用蓝色系 */ --theme-bg-primary: #0f304f; --theme-bg-secondary: #114066; --theme-bg-tertiary: #0f3a5c; --theme-bg-quaternary: #0e3555; --theme-bg-quinary: #1a4a72; --theme-header-bg: #114066; /* 边框颜色 */ --theme-border-primary: #43a1ff; --theme-border-tertiary: rgba(67, 161, 255, 0.3); --theme-border-input: rgba(67, 161, 255, 0.3); --theme-border-descriptions: #165799; /* 菜单颜色 */ --theme-menu-bg: #393a40; --theme-menu-text: #303133; --theme-menu-active: #616166; --theme-menu-title: #9fcfff; /* 系统颜色 */ --theme-system-bg: #0f304f; --theme-system-module-1: #114066; --theme-system-module-2: #0f3a5c; --theme-system-module-3: #0e3555; --theme-system-module-4: #1a4a72; --theme-system-active-bg: #0a2a45; --theme-system-input-bg: #114066; --theme-system-disabled-bg: #1e4f7a; --theme-system-table-text: rgb(192, 200, 208); --theme-select-title-bg: #0f3a5c; --theme-select-title-text: #ffffff; --theme-search-common-bg: #f5f7fa; --theme-search-common-border: rgba(67, 161, 255, 0.5); --theme-switch-border-color: #1e4f7a; --theme-switch-bg-color: #1e4f7a; --theme-add-condition-hover: #00ffff; --theme-remove-icon: #caecfd; --theme-text-inverse: #ffffff; --theme-tag-info-bg: rgb(7 95 166); --theme-form-label: #f0f0f0; --theme-loading-mask-bg: rgba(10, 38, 61, 0.9); /* 输入组颜色 */ --theme-input-group-bg: #0e3555; --theme-input-group-text: #00ffff; --theme-input-group-border: #43a1ff30; /* Element Plus 保持默认颜色 - 不覆盖 */ --el-color-primary: #409eff; --el-color-success: #67c23a; --el-color-warning: #e6a23c; --el-color-danger: #f56c6c; --el-color-error: #f56c6c; --el-color-info: #909399; --el-text-color-primary: #303133; --el-text-color-regular: #606266; --el-text-color-secondary: #909399; --el-text-color-placeholder: #a8abb2; --el-text-color-disabled: #c0c4cc; --el-border-color: #dcdfe6; --el-border-color-light: #e4e7ed; --el-border-color-lighter: #ebeef5; --el-border-color-extra-light: #f2f6fc; --el-fill-color: #f0f2f5; --el-fill-color-light: #f5f7fa; --el-fill-color-lighter: #fafafa; --el-fill-color-extra-light: #fafcff; --el-fill-color-blank: #ffffff; --el-bg-color: #ffffff; --el-bg-color-page: #f2f3f5; --el-bg-color-overlay: #ffffff; } /* 全局样式使用 CSS 变量 */ body { background-color: var(--theme-bg-primary); color: var(--theme-text-primary); } /* 按钮样式 - 移除覆盖,让 Element Plus 使用默认样式 */ /* .el-button { color: var(--theme-text-primary) !important; &.el-button--link { color: var(--theme-text-primary) !important; &:hover { color: var(--theme-primary) !important; } } &.el-button--primary { background-color: var(--theme-primary); border-color: var(--theme-primary); } } */ /* 输入框样式 - 移除覆盖,让 Element Plus 使用默认样式 */ /* .el-input__wrapper, .el-textarea__inner, .el-select__wrapper { background-color: var(--theme-system-input-bg) !important; color: var(--theme-text-primary) !important; box-shadow: 0 0 0 1px var(--theme-border-tertiary) inset !important; } .el-input__inner, .el-textarea__inner { background-color: var(--theme-system-input-bg); color: var(--theme-text-primary); } */ /* 表格样式 - 移除覆盖,让 Element Plus 使用默认样式 */ /* .el-table { background-color: var(--theme-system-module-3) !important; color: var(--theme-system-table-text); .el-table__header-wrapper { .el-table__header { .el-table__cell { background-color: var(--theme-system-module-3) !important; color: var(--theme-text-primary); } } } .el-table__body-wrapper { .el-table__row { .el-table__cell { background-color: var(--theme-system-module-1); color: var(--theme-system-table-text); } } } } */ /* 卡片样式 - 移除覆盖,让 Element Plus 使用默认样式 */ /* .el-card { background-color: var(--theme-system-module-1); color: var(--theme-text-primary); } */ /* 下拉菜单样式 - 移除覆盖,让 Element Plus 使用默认样式 */ /* .el-dropdown-menu { background-color: var(--theme-system-module-2); border: 1px solid var(--theme-border-primary) !important; .el-dropdown-menu__item { color: var(--theme-text-primary); &:hover { background-color: var(--theme-system-active-bg); color: var(--theme-primary); } } } */ /* 弹窗样式 - 移除覆盖,让 Element Plus 使用默认样式 */ /* .el-dialog { background-color: var(--theme-system-module-1); color: var(--theme-text-primary); } .el-message-box { background-color: var(--theme-system-module-1); color: var(--theme-text-primary); } */ /* 表单标签样式 - 移除覆盖,让 Element Plus 使用默认样式 */ /* .el-form-item__label { color: var(--theme-text-primary); } */ /* 选择器样式 - 移除覆盖,让 Element Plus 使用默认样式 */ /* .el-select__placeholder { color: var(--theme-text-primary) !important; } .el-select-dropdown { background-color: var(--theme-system-module-2); .el-select-dropdown__item { color: var(--theme-text-primary); &:hover { background-color: var(--theme-system-active-bg); } &.is-selected { color: var(--theme-primary); } } } */ /* 盒子颜色变量 - 深色主题 */ .theme-blue { --theme-box-color-1: #0d2d4a; --theme-box-color-2: #082238; --theme-box-color-3: #0b2740; --theme-box-color-4: #1f5580; --theme-box-color-5: #1a4a72; --theme-box-color-6: #0f3a5c; --theme-system-hover-active-text: #43a1ff; } /* 盒子颜色变量 - 浅色主题 */ .theme-white { --theme-box-color-1: #f5f7fa; --theme-box-color-2: #f0f2f5; --theme-box-color-3: #e4e7ed; --theme-box-color-4: #dcdfe6; --theme-box-color-5: #ebeef5; --theme-box-color-6: #f2f6fc; --theme-system-hover-active-text: #409eff; } /* 搜索框边框颜色变量 - 深色主题 */ .theme-blue { --theme-border-search: #0f3354; --theme-table-setting-bg: #104066; } /* 搜索框边框颜色变量 - 浅色主题 */ .theme-white { --theme-border-search: #dcdfe6; --theme-table-setting-bg: #f5f7fa; } /* 主题文本颜色类 - 深色主题显示白色,浅色主题显示黑色 */ .theme-text { color: var(--theme-text-inverse); }