首页 > 前端 > 正文

Layui2.8版本主题颜色是蓝绿色,和自己的主题不相符,那么如何更换主题色呢?

下面的地址有2种方法,大家可以任选其一。

https://gitee.com/layui/layui/issues/I72RNP

这里我贴出自己的简单粗暴的解决方案:

1.创建theme.css文件,代码如下:

:root {
    --primary-color: #2c7ef8
}

.layui-btn{background-color:var(--primary-color) !important; }
.layui-slider-input-btn i:hover{color: var(--primary-color) !important;}
.layui-layout-admin .layui-logo{color: var(--primary-color) !important;}
.layui-bg-green{background-color: var(--primary-color) !important; } 
.layui-border-green{border-color: var(--primary-color) !important; color: var(--primary-color) !important;}
.layui-font-green{color: var(--primary-color) !important;} 
.layui-btn-primary:hover{border-color: var(--primary-color) !important;}
.layui-btn-group .layui-btn-primary:hover{ color: var(--primary-color) !important;}
.layui-laypage a:hover{color: var(--primary-color) !important;}
.layui-laypage .layui-laypage-curr .layui-laypage-em{ background-color: var( --primary-color) !important; }
.layui-laypage input:focus,.layui-laypage select:focus{border-color: var(--primary-color) !important;}
.layui-upload-drag .layui-icon{color: var(--primary-color) ;}
.layui-upload-drag[lay-over]{border-color: var(--primary-color) !important}
.layui-nav-tree .layui-nav-child dd.layui-this a{background-color: var(--primary-color) !important; }
.layui-nav-tree .layui-nav-bar{background-color: var(--primary-color) !important;}
.layui-tab-brief > .layui-tab-title .layui-this{color: var( --primary-color) !important;}
.layui-slider-input-btn i:hover{color: var(--primary-color) !important;}
.layui-input:focus, .layui-textarea:focus{border-color: var(--primary-color) !important; }
.layui-form .layui-input:focus, .layui-form .layui-textarea:focus{border-color: var(--primary-color) !important; box-shadow: 0 0 0 3px rgba(192, 221, 248, 0.08);}
.layui-input-wrap .layui-input:focus + .layui-input-split{border-color: var(--primary-color) !important;}

2.在你的HTML文件中引入这个theme.css文件(所有的CSS之前),如下

   <link href="/static/common/admin/css/theme.css" rel="stylesheet">
   <link href="/static/common/admin/css/rovecoder.css" rel="stylesheet" />
   <link href="/static/common/admin/lib/layui/css/layui.css" rel="stylesheet">

如果想更改成其他的主题色,只需要更改–primary-color: #2c7ef8 这个色号即可。

RoveCoder版权所有,转载请注明

猜你喜欢
picture loss