scss混合器实现全局更换主题以及相关背景图

前言:

场景:基于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
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值