vue+elementui 主题配色修改-打造个性化配色系统

news2024/9/21 16:47:16

上一期中利用global.css来覆盖elementui原有的配色，修改了按钮和消息框。这一期继续尝试修改其他的控件。

1 修改info 类型按钮

上次修改了primary按钮，这次修改一下info按钮，在global.css中添加


.el-button--info {
    background-color: #d9dee4 !important; /*  */
    border-color: #000000 !important; /* 黑色边框 */
    color: #00bca5 !important; /*  */
}

.el-button--info:hover, .el-button--info:focus {
    background-color: #333333 !important; /*  */
    border-color: #333333 !important; /* 深黑色边框 */
    color: #00bca5 !important; /*  */
}

修改完之后效果（绿色文字的按钮）：
在这里插入图片描述

2 修改text类型按钮

再修改text类型的按钮，这个按钮在增删改查的界面里用到了：

/* 覆盖 text类型按钮的文字颜色 */
.el-button--text {
    color: rgba(170, 129, 9, 0.88) !important; /* 金色文字 */
}

效果：
在这里插入图片描述

3 修改 el-input 框焦点边框

这边修改el-input的焦点边框也为金色，而textarea的输入框样式是不一样的，需要单独设置：

/* 覆盖 el-input 的焦点边框颜色 */
.el-input__inner:focus {
    border-color: rgba(170, 129, 9, 0.88) !important; /* 设置边框颜色为金色 */
    box-shadow: 0 0 2px 2px rgba(255, 215, 0, 0.2) !important; /* 设置金色阴影效果，可选 */
    outline: none; /* 去除默认的 outline */
}

/* 覆盖 el-input textarea 的焦点边框颜色 */
.el-textarea__inner:focus {
    border-color: rgba(170, 129, 9, 0.88) !important; /* 设置边框颜色为金色 */
    box-shadow: 0 0 2px 2px rgba(255, 215, 0, 0.2) !important;
    outline: none;
}

在这里插入图片描述

4 数字选择框

数字选择框的样式比较多，也是调试了一会才把样式给覆盖住

/* 输入框在悬浮和聚焦状态下的边框颜色 */
.el-input-number :hover,
.el-input-number :focus,
.el-input-number.is-focus .el-input__inner {
    border-color: #FFD700 !important; /* 设置金色边框 */
    box-shadow: 0 0 2px 2px rgba(255, 215, 0, 0.2) !important; /* 可选的金色阴影效果 */
    outline: none; /* 移除默认的 outline */
}

/* el-input-number 左右按钮的悬浮颜色 */
.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled),
.el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled) {
    border-color: #FFD700 !important; /* 设置背景颜色为金色 */
}

/* el-input-number 图标颜色 */
.el-input-number__decrease:hover, .el-input-number__increase:hover {
    color: #FFD700 !important; /* 设置背景颜色为金色 */
}

在这里插入图片描述

5 select 框修改

在第3小节修改完之后select框是可以边框可以同时修改掉的，但是其中的选中颜色也需要单独设置，不然还是显示为蓝色：

/* 覆盖 select 组件选中项的背景颜色和文字颜色 */
.el-select-dropdown__item.selected {
    background-color: #FFD700 !important; /* 设置背景颜色为金色 */
    color: #333333 !important; /* 设置文字颜色为深色，确保在金色背景上清晰可见 */
}

在这里插入图片描述
修改后：

6 分页控件

分页控件修改两个样式，一个是激活状态下的颜色，另一个是用鼠标去悬浮在数字上，显示的是另一个颜色：

/* 覆盖 分页控件 的焦点边框颜色 */
.el-pager li.active{
    color: rgba(170, 129, 9, 0.88) !important; /* 金色文字 */
}

.el-pager li:hover {
    color: #00bca5 !important; /*  */
}