bui框架前端自定义配色基础属性
1253
6

现在越来越多的人使用bui前端框架了,但是bui默认的蓝色的,修改配色比较麻烦下面是我整理的一个配色表,新建一个css放到bui.css下面就可以重置为你想要的颜色了。

BUI版本:1.5x 其他版本不保证可以通用 里面的 #F56C6C  #E6A23C 只是为了演示 可以自己定义颜色 

备注:增强版商城重置颜色: 

手机版:请新建一个 public/static/suifeng/mall/wap/css/chongzhi.css 即可重置颜色

电脑版:public/static/suifeng/mall/pc/css/chongzhi.css 新建一下就可以重置颜色

/*头部颜色*/
.header.bui-bar, .header .bui-bar, header.bui-bar, header .bui-bar {background:#F56C6C;}
/*头部按钮图标的颜色*/
.header.bui-bar .bui-bar-left>[class*=bui-btn]>i, .header.bui-bar .bui-bar-right>[class*=bui-btn]>i, .header .bui-bar .bui-bar-left>[class*=bui-btn]>i, .header .bui-bar .bui-bar-right>[class*=bui-btn]>i, header.bui-bar .bui-bar-left>[class*=bui-btn]>i, header.bui-bar .bui-bar-right>[class*=bui-btn]>i, header .bui-bar .bui-bar-left>[class*=bui-btn]>i, header .bui-bar .bui-bar-right>[class*=bui-btn]>i {color: #fff;}
/*头部按钮文字的颜色*/
.header.bui-bar .bui-bar-main, .header .bui-bar .bui-bar-main, header.bui-bar .bui-bar-main, header .bui-bar .bui-bar-main {color: #fff;font-size: .34rem;}
/*发送验证码*/
.primary-reverse {color:#F56C6C;border-color:#F56C6C;}
/*滑动值的圆点*/
 .bui-range::-webkit-slider-thumb {background: #F56C6C;}
/*多选*/
.bui-choose.active, .bui-choose:checked, .bui-like.active, .bui-like:checked, .bui-fav.active, .bui-fav:checked, .bui-checkbox.active, .bui-checkbox:checked, .bui-radio.active, .bui-radio:checked {color: #F56C6C;}
/*单选*/
.bui-choose.active:before, .bui-choose:checked:before, .bui-like.active:before, .bui-like:checked:before, .bui-fav.active:before, .bui-fav:checked:before, .bui-checkbox.active:before, .bui-checkbox:checked:before, .bui-radio.active:before, .bui-radio:checked:before {color: #F56C6C;}
/*下拉边框*/
.bui-levelselect .select-value .active {border-bottom: 2px solid #F56C6C;}
.bui-levelselect .bui-list .bui-btn.active {color:#F56C6C;}
/*时间组件*/
.picker-item.picker-selected {color: #F56C6C;}
.picker-center-highlight {border-left: 2px solid #F56C6C;}
.primary-reverse {color: #F56C6C;border-color: #F56C6C;}
/*切换*/
/*.bui-switch-text:checked, .bui-switch:checked {background-color: #F56C6C;}*/
.bui-switch-text:after {background: #F56C6C;}
.bui-switch-text:checked:after {background: #F56C6C;}
/*其他*/
input.bui-tag:checked, input.bui-check:checked {background: RGBA(166, 227, 255, 0.21);border: 1px solid #F56C6C;}
/*按钮*/
[class*=bui-btn].primary {border-color: #F56C6C;background:#F56C6C}
[class*=bui-btn].primary:active {background:#E6A23C;color: #fff;border-color:#E6A23C;}
.bui-nav>.active {color:#F56C6C;background: #fff;}
/*TAB*/
.bui-tab .bui-nav .active {color: #E6A23C;background-color: #fff;}
.bui-nav>[class*=bui-btn].active:after {background:#E6A23C;}


5
赏礼
赏钱
收藏
点击回复
      全部留言
  • 6
  • 艺猫 普通粉丝 消费:115.1元 2020-08-05 06:37 06:376楼
    BUI主要用于手机端的吗
    wr1688 消费:2593.25元 华为 2020-08-06 08:16
    是的
0 赏钱 赏礼回复
  • 海阔高空 实战运营者 消费:0.03元 2020-08-04 19:44 19:446楼
    感谢分享.先收藏
0 赏钱 赏礼回复
  • aria 普通粉丝 消费:2460.49元 2020-08-04 18:53 18:536楼
    先收藏了
0 赏钱 赏礼回复
  • wr1688 风格开发者 消费:2593.25元 2020-08-04 18:42 18:42
    华为
    6楼
    优秀
0 赏钱 赏礼回复
0 赏钱 赏礼回复
更多回复
      你可能感兴趣的主题
恢复多功能编辑器
  • 3 1
  • Suifeng开发交流圈
        圈内贴子4133
    • 圈子成员437
    本圈子内的新贴

    推荐内容
    扫一扫访问手机版
    请选择要切换的马甲:

     
    网页即时交流
    QQ咨询
    咨询热线
    020-28998648