Vue + Scss动态切换主题颜色实现换肤的方法

  介绍

这篇文章主要讲解了Vue + Scss动态切换主题颜色实现换肤的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

根据预设的配色方案,在前端实现动态切换系统主题颜色。

大概的思路就是给html根标签设置一个data-theme属性,然后通过js切换data-theme的属性值,Scss根据此属性来判断使用对应主题变量。这里可以选择持久化Vux或接口来保存用户选择的主题。


1。安装依赖

 npm安装node-sass sass-loader——save-dev 

2。找到构建中webpack.base.conf。js,在规则中添加scss规则

{   测试:/\ .scss/美元,   加载器:[& # 39;风格# 39;& # 39;css # 39;, & # 39; sass # 39; v)   }

3。在vue文件中使用

& lt;风格lang=& # 39; scss # 39;scoped>   & lt;/style>


1。安装sass-resources-loader

 npm安装sass-resources-loader——save-dev 

2。然后修改构建中效用的。js

 scss: generateLoaders (& # 39; sass # 39;) 

修改为:

scss: generateLoaders (& # 39; sass # 39;) .concat (   {   装载机:& # 39;sass-resources-loader& # 39;   选择:{//你自己的scss全局文件的路径   资源:路径。解决(__dirname & # 39; . ./src/风格/_common.scss& # 39;)   }   }   )


1。新建一个Scss文件_themes。scss,里面可以配置不同的主题配色方案

//当HTML的data-theme为黑暗时,样式引用黑暗//data-theme为其他值时,就采用组件库的默认样式//这里我只定义了两套主题方案,想要再多只需在“美元主题”里加就行了//注意一点是,每套配色方案里的关键可以自定义但必须一致,不然就会混乱      主题:美元(      光://字体   font_color1: # 414141,   font_color2:白色,//背景   background_color1: # fff,   background_color2: # f0f2f5,   background_color3:红色,   e7 background_color4: # 2674,//边框   border_color1: # 3 d414a,      ),      黑暗的:(//字体   font_color1: # a7a7a7,   font_color2:白色,//背景   b2531 background_color1: # 1,   background_color2: # 283142,   e6ceb background_color3: # 1,   e4e background_color4: # 323,//边框   border_color1: # 3 d414a,      )   );

这里定义了一个地图——美元主题,分别存放对应主题的颜色变量集合。

注意,scss文件名建议用下划线开的头,如_themes.scss,防止执行时被编译成单独的css文件。

2。定义另外一个sass文件_handle。scss来操作1中美元的主题变量(当然两个文件可以合,并分开写是想把配置和操作解耦),上代码:

 

themeify方法用于获取HTML的data-theme值。

主题的方法用于根据HTML的data-theme值及调用者传过来的关键去_themes.scss里获取相应的颜色。
上面可以根据自己的使用场景自定义混入器、上面只定义了三个常用的背景,边框和字体的颜色。

3。具体在vue中使用,直接引入对应混入器就好,取哪个颜色,传哪个键,就这么简单

& lt;风格lang=皊css"scoped>   @ import“@/风格/_handle.scss";      .common-util {   字体大小:18 px;   @include font_color (“font_color1");   @include background_color (“background_color1");   @include border_color (“border_color1");   }   & lt;/style>

3。使用js动态切换HTML的属性data-theme的值

Vue + Scss动态切换主题颜色实现换肤的方法