再用elementui中的组件时根据项目的不同主题色也不一样, 这里是对一些常用组件基础颜色的修改,可以直接用,根据主题色的不同直接替换—theme_color变量的值就行
/* 全局样式 */
html,body {
--theme_color: #0C871B;
}
/* primary按钮样式 */
.el-button--primary {
background-color: var(--theme_color);
border-color: var(--theme_color);
}
.el-button--primary:hover {
background-color: #1c922a;
border-color: #1c922a;
}
.el-button--primary:focus {
background-color: #1c922a;
border-color: #1c922a;
}
/* checkbox */
.el-checkbox__inner:hover {
border-color: var(--theme_color);
}
.el-checkbox__input.is-focus .el-checkbox__inner {
border-color: var(--theme_color);
}
.el-checkbox__input.is-checked .el-checkbox__inner {
background-color: var(--theme_color);
border-color: var(--theme_color);
}
.el-checkbox__input.is-checked+.el-checkbox__label {
color: var(--theme_color);
}
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: var(--theme_color);
border-color: var(--theme_color);
}
/* input */
.el-input__inner:focus {
border-color: var(--theme_color);
}
.el-range-editor.is-active, .el-range-editor.is-active:hover {
border-color: var(--theme_color);
}
.el-time-panel__btn.confirm {
color: var(--theme_color);
}
.el-picker-panel__icon-btn:hover {
color: var(--theme_color);
}
.el-date-table td.available:hover {
color: var(--theme_color);
}
.el-date-table td.start-date span {
background-color: var(--theme_color);
}
.el-date-table td.end-date span {
background-color: var(--theme_color);
}
.el-date-table td.today span {
color: var(--theme_color);
}
/* 面包屑 */
.el-breadcrumb__inner a:hover {
color: var(--theme_color);
}
/* menu 导航栏 */
.el-menu--horizontal>.el-menu-item.is-active {
border-bottom: 2px solid var(--theme_color);
color: var(--theme_color);
}
.el-menu--horizontal>.el-menu-item:hover {
color: var(--theme_color);
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
color: var(--theme_color);
}
/* 下拉菜单 */
.el-dropdown-menu__item:not(.is-disabled):hover {
background-color: #c0f7c7;
color: var(--theme_color);
}
/* el-select */
.el-select .el-input.is-focus .el-input__inner {
border-color: var(--theme_color);
}
.el-select .el-input__inner:focus {
border-color: var(--theme_color);
}
.el-select-dropdown__item.selected {
color: var(--theme_color);
}
/* .el-cascader */
.el-cascader .el-input.is-focus .el-input__inner {
border-color: var(--theme_color);
}
.el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {
color: var(--theme_color);
}
.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {
color: var(--theme_color);
}
/* .el-radio */
.el-radio__input.is-checked .el-radio__inner {
background-color: var(--theme_color);
border-color: var(--theme_color);
}
.el-radio__inner:hover {
border-color: var(--theme_color);
}
/* el-pager */
.el-pager li.active {
color: var(--theme_color);
}
.el-pager li:hover {
color: var(--theme_color);
}
/* el-pagination */
.el-pagination__sizes .el-input .el-input__inner:hover {
border-color: var(--theme_color);
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: var(--theme_color);
}
/* el-tree */
.el-tree-node.is-current>.el-tree-node__content {
background-color: var(--theme_color);
color:#fff;
}
在vue中使用,就在APP.vue style标签中引入就行, 不要加scoped属性
@import './gloab_css.css';
原文地址:https://blog.csdn.net/m0_60648668/article/details/126768311
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_44928.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。