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

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

1 修改info 类型按钮

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

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类型的按钮,这个按钮在增删改查的界面里用到了:

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

效果:

3 修改 el-input 框焦点边框

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

css 复制代码
/* 覆盖 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 数字选择框

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

css 复制代码
/* 输入框在悬浮和聚焦状态下的边框颜色 */
.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框是可以边框可以同时修改掉的,但是其中的选中颜色也需要单独设置,不然还是显示为蓝色:

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

修改后:

6 分页控件

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

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

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

当前是表格位于第4页,鼠标悬浮在第5页上的效果:

相关推荐
你的人类朋友40 分钟前
什么是API签名?
前端·后端·安全
会豪3 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子3 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶3 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子3 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_3 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark3 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_23333 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin3 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_4 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js