Element自定义主题色

配置：

1、新建style文件夹，存放样式

common.scss------全局样式

java 复制代码

// 清除默认样式
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body,
#app {
    width: 100%;
    height: 100%;
}

// 去掉列表默认样式
ul,
ol {
    list-style: none;
}

// 去掉 a 标签默认样式
a {
    text-decoration: none;
    color: inherit;
}

// 去掉按钮默认边框
button {
    border: none;
}


// 全局样式
body {
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

// 单行文本溢出省略号
.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

// 两行省略
.ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

theme-vars.scss------全局变量

java 复制代码

// 1、全局变量
// 颜色变量
$color-primary: #xxx;
$color-success: #xxx;
$color-warning: #xxx;
$color-danger: #xxx;

// 字体变量
$fs-12: 12px;
$fs-14: 14px;
$fs-16: 16px;
$fs-18: 18px;
$fs-20: 20px;

// 加粗
$fw-500: 500;
$fw-600: 600;

// 间距
$sp-1: 4px;
$sp-2: 8px;
$sp-3: 12px;
$sp-4: 16px;
$sp-5: 24px;
$sp-6: 32px;

// 圆角
$radius-sm: 4px;
$radius-md: 8px;
$radius-lg: 12px;

// 阴影
$shadow-card: 0 2px 8px rgba(0, 0, 0, 0.05);
$shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12);

element.scss------主题色

java 复制代码

// element.scss
@use "./theme-vars.scss" as vars;

// ==================== 第一部分：全局 CSS 变量覆盖 ====================
// 在 :root 中定义全局变量，Element Plus 会自动使用这些变量
:root {
  /* ========= 你的主题语义变量 ========= */
  --global-primary: #{vars.$color-primary};
  --global-primary-hover: #{vars.$color-button-hover}; 
  --global-bg-hover: #{vars.$select-hover-bg};         
  --global-bg-selected: #{vars.$select-selected-bg};
  --global-border: #{vars.$color-border};
  --global-text: #{vars.$text-color};
  --global-title: #{vars.$title-color};

  /* ========= Element Plus 核心颜色 ========= */
  --el-color-primary: var(--global-primary);

  /* primary 按钮 hover 就用这个 */
  --el-color-primary-light-3: var(--global-primary-hover);

  /* 次级浅色（很少直接用） */
  --el-color-primary-light-5: #8F91FF;
  --el-color-primary-light-7: #B6B7FF;

  /* active */
  --el-color-primary-dark-2: #5A5CFF;

  /* ========= 全局背景 hover ========= */
  --el-fill-color-light: var(--global-bg-hover);
  --el-color-primary-light-9: var(--global-bg-hover);
  --el-color-primary-light-8: var(--global-bg-selected);

  /* ========= 边框 ========= */
  --el-border-color: var(--global-border);

  /* ========= 文本 ========= */
  --el-text-color-primary: var(--global-title);
  --el-text-color-regular: var(--global-text);

  /* ========= 圆角 ========= */
  --el-border-radius-base: #{vars.$radius-sm};
  --el-border-radius-small: 2px;

  /* ========= Select ========= */
  --el-select-border-color-hover: var(--global-primary);
  --el-select-input-focus-border-color: var(--global-primary);
  --el-select-option-hover-background: var(--global-bg-hover);
  --el-select-option-selected: var(--global-primary);
  --el-select-option-selected-hover: var(--global-bg-selected);
}


// ==================== 第二部分：全局通用 hover/select 样式 ====================
// 1. 所有 Element Plus 组件的通用 hover 效果
.el-button:not(.is-disabled):hover,
.el-input__wrapper:hover,
.el-select:hover .el-input__wrapper,
.el-checkbox:hover .el-checkbox__inner,
.el-radio:hover .el-radio__inner,
.el-color-picker:hover .el-color-picker__trigger,
.el-date-editor:hover .el-input__wrapper,
.el-cascader:hover .el-input__wrapper,
.el-menu-item:hover,
.el-tabs__item:hover,
.el-tree-node__content:hover,
.el-table__row:hover td {
  border-color: var(--global-primary) !important;
}

// 2. 所有 Element Plus 组件的通用 focus 效果
.el-button:focus,
.el-input__wrapper.is-focus,
.el-select .el-input__wrapper.is-focus,
.el-checkbox.is-focus .el-checkbox__inner,
.el-radio.is-focus .el-radio__inner,
.el-color-picker.is-focus .el-color-picker__trigger,
.el-date-editor .el-input__wrapper.is-focus,
.el-cascader .el-input__wrapper.is-focus {
  border-color: var(--global-primary) !important;
  box-shadow: 0 0 0 1px var(--global-primary) inset !important;
}

// 3. 所有选中/激活状态的通用样式
.el-select-dropdown__item.is-selected,
.el-checkbox.is-checked .el-checkbox__label,
.el-radio.is-checked .el-radio__label,
.el-menu-item.is-active,
.el-tabs__item.is-active,
.el-cascader-node.in-active-path,
.el-tree-node.is-current > .el-tree-node__content,
.el-table__row.current-row {
  color: var(--global-primary) !important;
}

// ==================== 第三部分：组件特定样式微调 ====================
/* Select 输入框外观 */
.el-select .el-select__wrapper {
  border-radius: #{vars.$radius-lg};
  border-color: #{vars.$color-border};
  height: 40px;
  display: flex;
  align-items: center;

  &:hover {
    border-color: #{vars.$select-hover-bg};
  }

  &.is-focus {
    box-shadow: 0 0 0 1px #{vars.$color-primary} inset;
    border-color: #{vars.$color-primary};
  }
}

.el-select__placeholder {
  color: #{vars.$title-color};
}

/* Select 下拉菜单整体 */
.el-select-dropdown {
  border-radius: #{vars.$radius-lg};
  border: 1px solid #f0f0f0;
}

/* Select 下拉项 */
.el-select-dropdown__item {
  padding: 8px 14px !important;
  margin: 2px 4px;
  line-height: 20px;
  font-size: 14px;
  border-radius: #{vars.$radius-md};

  &.is-selected {
    color: #{vars.$color-primary};
    background-color: #{vars.$select-selected-bg};
  }

  &:hover {
    background-color: #{vars.$select-hover-bg};
  }
}

/* Tree 节点允许换行 */
.el-tree-node__label {
  display: inline-block;
  white-space: normal !important;
  line-height: 1.4 !important;
  word-break: break-word !important;
}

/* Tree 节点 hover 背景圆角 */
.el-tree-node__content {
  height: auto !important;
  border-radius: #{vars.$radius-md} !important;
  margin: 2px 0;
  padding: 10px;
}

.el-tree-node__label {
  padding: 8px 0;
}

/* hover 样式 */
.el-tree-node__content:hover {
  background-color: #{vars.$select-hover-bg};
  border-radius: #{vars.$radius-md};
}

/* 选中节点的背景色圆角 */
.el-tree-node.is-current > .el-tree-node__content {
  background-color: #{vars.$select-hover-bg};
  color: #{vars.$color-primary};
  border-radius: #{vars.$radius-md};
}

// /* 解决：父节点在展开 & 非 current 状态下被 Element Plus 自动加灰底的问题 */
// .el-tree-node.is-expanded:not(.is-current) > .el-tree-node__content {
//   background-color: transparent;
// }

//.el-form-item
.el-form-item {
  margin: 0;
  margin-right: 24px;
}

/* 只影响 inline 表单*/
.el-form--inline .el-form-item__label {
  height: 40px;           
  display: flex;
  align-items: center;   
  padding-bottom: 0;      
  display: flex;          
  align-items: center;
}

.el-form--inline .el-form-item {
  display: inline-flex;
  align-items: center;
}

.el-form--inline .el-form-item__label {
  line-height: normal;
  padding-bottom: 0; 
}


//el-input
/* el-input 外层 */
.el-input__wrapper {
  height: 40px;
  display: flex;
  align-items: center;
  border-radius: 12px;
}

/* 真正输入框 */
.el-input__inner {
  height: 100%;
  line-height: 40px;
}

//el-date-picker
.el-date-editor .el-input__wrapper {
  height: 40px;
}

//button
.el-button {
  border-width: 1px;
}

.el-button:focus,
.el-button:focus-visible,
.el-button:active,
.el-button:hover {
  box-shadow: none !important;
  outline: none !important;
}

//分页
.el-pager li {
  border-radius: 10px;
}
.el-pager li:hover {
  background-color: #{vars.$select-hover-bg};
  color: #{vars.$color-primary};
}
.el-pager li.is-active {
  background-color: #{vars.$color-primary}!important;
  color: #fff!important;
}

//弹框
.el-popup-parent--hidden {
  padding-right: 0 !important;
}

//自定义图标与文字内容样式
.custom-warning {
  display: flex;
  align-items: center;
  gap: 2px;

  .warn-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

// 内容
.el-message-box__container {
  .el-message-box__message {
    font-size: 14px;
    color: #3D3D3D;
    font-weight: 500;
  }
}

.el-message-box {
  border-radius: 12px;
}

//遮罩层颜色
.el-overlay.is-message-box {
  background: rgba(21, 19, 27, 0.76);
}

.el-dialog {
  border-radius: 12px;
}

2、vite.config.js

java 复制代码

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
    plugins: [
        // 自动导入 Element Plus，并启用 SASS 模式（主题色必须）
        Components({
            resolvers: [
                ElementPlusResolver({
                    importStyle: 'sass',
                }),
            ],
        }),
    ],
    css: {
        preprocessorOptions: {
            scss: {
                api: 'modern-compiler',
                additionalData: `
                    @use "@/styles/theme-vars.scss" as *;
                    @use "@/styles/element.scss" as *;
                `
            },
        },
    }
})

3、main.js

java 复制代码

import "@/styles/common.scss";