2019独角兽企业重金招聘Python工程师标准>>>

综合比较了一些前端的UI,最后还是决定用mint-ui,但是默认的风格是蓝色,我要改成微UI的绿色。
其实也就主要修改颜色#26a2ff改为#1aad19。

部分效果如下:

下面直入正题,仅需2个步骤,如下:
1、新建/src/styles/weui.scss文件,覆盖mint-ui的primary颜色。
PS:我是安装了node-sass的,如果没有安装的童鞋,请自行修改weui.scss文件和里面的颜色。

/* 覆盖mint-ui的primary颜色,改为微信UI的绿色 */
$color-primary: #1aad19;.mint-header {background-color: $color-primary;
}
.mint-button:not(.is-disabled):active::after {opacity: .2 /* .6 */
}
.mint-button--primary {background-color: $color-primary;
}
.mint-button--primary.is-plain {border: 1px solid $color-primary;color: $color-primary
}
.mint-badge.is-primary {background-color: $color-primary
}
.mint-switch-input:checked + .mint-switch-core {border-color: $color-primary;background-color: $color-primary;
}
.mint-navbar .mint-tab-item.is-selected {border-bottom: 3px solid $color-primary;color: $color-primary;
}
.mint-tabbar > .mint-tab-item.is-selected {color: $color-primary;
}
.mint-searchbar-cancel {color: $color-primary;
}
.mint-checkbox-input:checked + .mint-checkbox-core {background-color: $color-primary;border-color: $color-primary;
}
.mint-radio-input:checked + .mint-radio-core {background-color: $color-primary;border-color: $color-primary;
}
.mt-range-progress {background-color: $color-primary;
}
.mt-progress-progress {background-color: $color-primary;
}
.mint-msgbox-confirm {color: $color-primary;
}
.mint-msgbox-confirm:active {color: $color-primary;
}
.mint-datetime-action {color: $color-primary;
}

2、main.js引入mint-ui(这里仅为了展示如何覆盖样式,使用的全局引入)

import MintUI from 'mint-ui';
import 'mint-ui/lib/style.min.css'
import './styles/weui.scss'; //核心,多了这一行用上边的样式覆盖默认的primary颜色
Vue.use(MintUI);

PS:如果还有其他颜色改漏了,可参考https://weui.io/对应调

转载于:https://my.oschina.net/u/3219445/blog/1585037

修改mint-ui的主题色相关推荐

  1. Element UI 改变主题色

    文章目录 前言 第一种方法 1.安装scss包 2.新建一个样式文件 引入 第二种方法 所以我们可以结合第一种和第二种情况 推荐使用 前言 用于实现不同功能的系统往往需要独特的主题色,本文用于更改el ...

  2. Vue中修改Mint UI的Toast默认样式问题 - 字体大小调整

    1- 给Toast添加className Toast({message: '请输入正确的手机号码',duration: 800,className: 'noticeError' }); 2- 添加样式 ...

  3. Vue - 超详细 Element 组件库主题颜色进行 “统一全局“ 替换,将默认的蓝色主题色更换为其他自定义颜色(保姆级教程,简易且标准全局替换主题色)

    前言 网上的文章可以用乱七八糟来形容了,各种奇葩的引入.安装各种东西,本文提供简洁且符合官方标准的解决方案. Element UI 默认主题色是蓝色,很可能与我们设计稿不一致(比如设计稿是绿色主题), ...

  4. 基于elementui的主题色改变和全网站色彩切换

    主题色切换 什么是主题色切换,所谓的主题色切换就是我们通过自定义的方式去修改elementUI原有的主题色,以达到我们业务所要使用的多(单)色彩切换. 静态切换 elementui 采用的是scss进 ...

  5. MahApps.Metro扁平化UI控件库(可修改主题色等)

    一.名词解释 使用MahApps.Metro扁平化UI控件库,可以使界面呈现更加美观.本文将总结MahApps.Metro的使用方法,及如何自定义修改其主题颜色等. 详细内容可参考官网:https:/ ...

  6. Naive ui主题色修改

    Naive ui主题色修改 新建 theme.ts 文件 import type { GlobalThemeOverrides } from 'naive-ui' const themeOverrid ...

  7. node-sass改dart-sass and 一些七七八八,实现sass主题色修改

    sass相关七七八八 dart-sass sass SCSS变量 css变量 SCSS数据类型 !default 插值语句 条件语句 @if @for循环 @each循环 @while循环 @impo ...

  8. react+antd 修改主题色

    项目使用的时 react 框架 和 ant design ui组件库 antd 官网中对定制主体是这样说的 详见:https://ant.design/docs/react/customize-the ...

  9. 修改Windows10的主题色(文件夹也会改变)

    修改Windows10的主题色(文件夹也会改变) 1.在桌面上右键鼠标,点击个性化.示例: 2.点击颜色->选择默认应用模式->暗.示例: 3.退出,显示文件夹的效果是黑色,感觉比之前的白 ...

  10. uniapp 微信小程序配置全局主题色、实现动态修改主题色

    前言: 本文的实现目标是全局配置小程序的整体主题色,包括本地图标的色调.第一步实现在本地可以统一修改整体的主题色以及本地图标的颜色:第二步实现通过后台接口动态调整小程序前端的整体主题色以及本地图标颜色 ...

最新文章

  1. IOS block 教程
  2. JavaScript,JS如何控制input输入字符限制
  3. 数字图像缩放之最近邻插值与双线性插值处理效果对比
  4. USB供电不足怎么办
  5. Android开发之Handler和Looper的关系
  6. ARM GIC简介与Linux中断处理分析
  7. [RabbitMQ]创建Java开发环境_消费者_生产者
  8. xtrabackup备份mysql5.7_【 xtrabackup】CentOS7.x上基于 MySQL 5.7.x的XtraBackup 安装与备份还原...
  9. 解决移动端touch事件与click冲突的问题
  10. ASP.NET DEMO Ⅳ : 使用数据源控件将数据绑定到 ListControl 上
  11. ps批量处理--像素大小修改
  12. 计算机用户 图片存储位置,电脑版微信图片存在哪里?存储地址是什么?
  13. 医院时钟系统(卫星校时钟)设计与答疑
  14. prior 和 priori的区别
  15. python建模库介绍:pandas与建模代码的结合,使用Patsy创建模型描述
  16. Python中的and和or运算
  17. 全民推荐时代已经到来!SaaS联盟推广计划如何开展?
  18. BOL简单分析(二)
  19. 教你们1秒钟复制百度文库中所有内容
  20. java基础学习-多线程笔记

热门文章

  1. Android之自定义横向滚动菜单
  2. 人工智能实践:TensorFlow笔记学习(五)—— 全连接网络基础
  3. 编写 Solidity 测试脚本
  4. Glide DiskCache 原理分析
  5. jQuery DOM
  6. 老李分享:系统可用性评估
  7. ecside使用笔记(1)
  8. android之启动桌面activity
  9. AutoHotKey Script AHK脚本++Topre Realforce 104Pro十周年纪念版静电容键盘
  10. 博客园上海俱乐部第二次活动全程图片报道(多图)