这篇文章主要讲解了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动态切换主题颜色实现换肤的方法