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页上的效果:

相关推荐
JNU freshman14 分钟前
Element Plus组件
前端·vue.js·vue3
一只专注api接口开发的技术猿21 分钟前
容器化与调度:使用 Docker 与 K8s 管理分布式淘宝商品数据采集任务
开发语言·前端·数据库
我有一棵树25 分钟前
性能优化之前端与服务端中的 Gzip 压缩全解析
前端
魔术师卡颂29 分钟前
不就写提示词?提示词工程为啥是工程?
前端·人工智能·后端
訾博ZiBo1 小时前
【Vibe Coding】001-前端界面常用布局
前端
IT_陈寒1 小时前
《Redis性能翻倍的7个冷门技巧,90%开发者都不知道!》
前端·人工智能·后端
歪歪1001 小时前
React Native开发Android&IOS流程完整指南
android·开发语言·前端·react native·ios·前端框架
知识分享小能手1 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
ZYMFZ1 小时前
python面向对象
前端·数据库·python
长空任鸟飞_阿康1 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·vue.js·人工智能