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 Francisco","Arial","sans-serif","Microsoft YaHei","微软雅黑",/* 框架左侧样式 */// 菜单栏背景色leftNavBg:#1b2443,// 菜单栏宽度leftNavWidth: 230px,// 菜单栏最小宽度leftNavMinWidth: 64px,// 菜单logo区域高度leftLogoHeight: 140px,// 右侧区域背景色rightMainBg: #F1F1F3,// 菜单默认颜色leftNavColor: #899EB1,// 菜单高亮颜色leftNavActiveColor: #566367,// 菜单高亮背景色leftNavActiveBg: rgba(#4e5c60, 0.5),/* 框架头部样式 */headerHeight: 50px,headerBgColor: #fff,headerColor: #333,headerBorderColor: none,tagNavHeight: 32px,breadcrumbHeight: 40px,/* 面包屑默认颜色*/breadColor: #97a8be,/* 面包屑链接颜色*/breadActiveColor: #A4A4A4,
);
$dark:(// 默认图片地址baseImageURL: '~@/assets/image/themeB/',/* 基础颜色-------------------------- */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(lightGray, .3) ,// 深色主题色themeColor: #1b2443,// 浅色主题色themeShallowColor: rgba(74, 77, 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 Francisco","Arial","sans-serif","Microsoft YaHei","微软雅黑",/* 框架左侧样式 */// 菜单栏背景色leftNavBg: #1b2443,// 菜单栏宽度leftNavWidth: 230px,// 菜单栏最小宽度leftNavMinWidth: 64px,// 菜单logo区域高度leftLogoHeight: 140px,// 右侧区域背景色rightMainBg: #F1F1F3,// 菜单默认颜色leftNavColor: #899EB1,// 菜单高亮颜色leftNavActiveColor: #566367,// 菜单高亮背景色leftNavActiveBg: rgba(#4a4d60, 0.5),/* 框架头部样式 */headerHeight: 50px,headerBgColor: #fff,headerColor: #333,headerBorderColor: none,tagNavHeight: 32px,breadcrumbHeight: 40px,/* 面包屑默认颜色*/breadColor: #97a8be,/* 面包屑链接颜色*/breadActiveColor: #A4A4A4,
);
$themes:(default: $default,dark: $dark
)

2、创建scss混合器【_mixins.scss】

以下代码引用路径，请确保_theme.scss 和 _mixins.scss创建路径归属相同。【如路径不同请注意引用路径】

@import './themes.scss';
@mixin themeify {//$theme-name 主题样式类名， $theme-map样式@each $theme-name, $theme-map in $themes {$theme-map: $theme-map !global; body[data-theme=#{$theme-name}] & { @content;}}
}
// 主题图片加载混合器 $path 图片名称地址
@mixin imageURL($path) {background-image: url(map-get($theme-map, 'baseImageURL') + $path);background-repeat: no-repeat;
}
// 声明一个根据Key获取颜色的函数
@function themed($key) {@return map-get($theme-map, $key);
}

3、index.html中定义全局主题样式属性

<body data-theme="dark">
<!-- 代码区域 -->
</body>

根据_theme.scss定义的主题名称进行有效赋值，为了方便理解，以上使用静态调用方式，系统如需进行记忆动态切换主题，是另一种相对复杂点的方式，本篇章暂不说明。

4、组件中实际使用，根据页面需要引入【testPage.vue】

testPage.vue使用示例

<template><div class="test-page"><!-- 具体代码区域 --></div>
</template>

<style lang="scss" scoped>
@import '~@/assets/style/theme/mixins';
.test-page {@include themeify {padding:10px;box-sizing: border-box;@include imageURL('cl-bg.png');background-position: bottom center;background-size: cover;.header {a {margin-left: 15px;border:solid 1px themed('baseColor');color: themed('baseColor');background: #ffffff;padding:5px 10px;border-radius: 4px;&:hover {background: themed('baseColor');color: #fff;}}}.title {margin: 80px auto 50px;height: 110px;line-height: 110px;text-align: center;@include imageURL('cl-title.png');background-position: top center;}.list {li {@for $i from 1 to 6 {&:nth-child(#{$i}) {@include imageURL('cl-typebg-#{$i}.png');background-position: top center;background-size: cover;}}}}}
}
</style>

懒人更新，如有问题请评论区留言，或者有更优秀的方法请分享互相学习。

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

信息安全主题的高清PPT背景图110张，打包下载
网络安全主题高清背景图PPT可用.zip: 点击高速下载
简述改变计算机桌面背景的方法,win7开关机背景图怎么更换_win7电脑换开关机壁纸图片的方法...
最近有朋友问小编win7开关机背景图怎么更换的问题,对于这个问题,相信很多朋友都不是太清楚,有时我们会觉得电脑默认的开关机壁纸不好看,那么我们应该如何更换win7开关机背景图呢?别着急,今天小编就针对 ...
IDEA相关配置（特别完整）看完此篇就将所有的IDEA的相关配置都配置好了、设置鼠标滚轮修改字体大小、设置鼠标悬浮提示、设置主题、设置窗体及菜单的字体及字体大小、设置编辑区主题、通过插件更换主题
文章目录 1.创建模块(Module) 2.常用配置 2.1Appearance & Behavior 2.1.1设置主题 2.1.2设置窗体及菜单的字体及字体大小 (可忽略) 2.1.3补充 ...
hexo+gitHub 个人博客搭建及更换主题历程（特适合入门小白）
内容涵盖 hexo+gitHub 个人博客搭建搭建过程中遇到的问题及解决方案更换主题 1. gitHub 创建博客仓库 (1) 注册Github(如果已注册可以忽略次此步骤) 详细注册步骤请参考: ...
uni-app框架开发App如何更换主题皮肤？
最近使用uni-app开发App,其中有个功能是可以一键切换App的主题皮肤.其中主题皮肤分为黑夜版和白天版.经过一番研究,终于大功告成,因此记录一下. 之前,在做web端进行更换皮肤的时候,是在页面 ...
动态更换主题色（换肤功能）
文章目录对于可供选择的颜色/主题样式换肤的实现一个全局class控制样式切换 JS改变href属性值切换样式表,例如 HTML 的 rel 属性下的 alternate 实现: 对于制定动态色值换 ...
element-plus 更换主题色
element-plus 更换主题色场景: 简单的定制主题色,并不需要有按钮切换主题色. 实现: 在项目中新建你的theme.scss,代码如下: // style/element/index.sc ...
element-plus更换主题色(有手就行)
省流版: 在App.vue中加入: <script setup> import { onMounted } from 'vue'onMounted(() => {document.b ...
Ant design vue中实现动态更换主题色
一.创建vue项目可视化创建步骤:cmd调出窗口,输入vue ui,自动在浏览器上打开新窗口输入文件名 ,文件名最好是英文然后进行配置功能, 根据需求选择配置功能这里最好选择2.0版本, 可以 ...