前言:
场景:基于Vue+Element-Ui组件库开发的项目,使用过程中难免会出现许多设计的自定义的特殊样式样式以及背景图,相同组件使用于不同场景情况下,需要进行不同主题的展示,以下解决方法适用于全局快速更换主题。
关于Element-Ui部分的主题切换请结合官方 https://element.eleme.cn/#/zh-CN/theme提供的方式组合使用。有需要了解的可以评论留言,有需要再更新这块的使用示例。
1、定义主题库样式文件【_theme.scss】
以下全局主题属性/公用样式名称以及取值,都可以根据自己项目实际使用情况自定义命名,示例文件定义仅为示例使用
$default:(
// 默认图片地址
baseImageURL: '~@/assets/image/themeA/',
/* 基础颜色
-------------------------- */
black: #333,
blackGray: #909399,
white: #fff,
lightGray: #F1F1F3,
lighterGray: #F5F5F5,
gray: #999,
darkGray: #666 ,
red: #d45b5b ,
yellow: #dfdb07 ,
orange: #FCCD7D ,
baseColor: #1f91ec,
// 边框颜色
borderColor: #F9F9F9 ,
borderDarkColor: #ededed ,
transparent: rgba(0,0,0,0) ,
shadowColor: rgba(#F5F5F5, .3) ,
// 深色主题色
themeColor: #1b2443,
// 浅色主题色
themeShallowColor: rgba(78, 92, 96, 0.5),
// 主题边框颜色
themeBorderColor: #1f91ec,
// 主题文字颜色
themeTextColor: #1f91ec,
// 浅色边框颜色
themeBorderLight: #F2F5F8,
// 浅色主题
themeHoverColor: rgba(#1f91ec, 0.8),
/* 基本设置
-------------------------- */
basicSpace: 10px,
basicMargin: 10px,
basicPadding: 10px,
/* 字体设置
-------------------------- */
// 选中字体颜色
activeFontColor: #1f91ec,
// 默认字体颜色
defaultFontColor: #333,
// 一级标题字体大小
headerFontSize: 18px,
// 二级标题字体大小
secondLevelFontSize: 16px,
// 其他字体大小
defaultFontSize: 14px,
// 默认字体
// fontFamily: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","San Francis