【实战】网站主题话切换与图片背景主题化切换，解决方案。

开篇  先说一下思想原理

   主题化，肯定是一些公共样式的切换，如hover的背景色，头部的图片的切换，以及字体颜色的切换

   接下来第一步，我们先新建一个xxx.css文件，放在assets中，

这个文件中定义一些你要设置的变量，如我所写的

 /* 蓝色主题  蓝色 */
    --blue-blue:#377fd4;
   

    /* 蓝色主题  首页顶部蓝色 */
    --blue-index-blue:#377fd4;
    /* 蓝色主题  白色 */
    --blue-white:#fff;
    /* 蓝色主题  黑色 */
    --blue-balck:#0d1c28;

然后关键的一步就是，

需要你再   main.js中全局引入这个样式文件

//蓝色主题样式导入

import "@/assets/css/public/blueThere.css"

导入主题后

你在你写样式的时候就可以这样写了，

案例样式

background:var(--blue-blue);

这时候你就可以看到当前这个元素的背景就是蓝色的了

当前这个颜色，是你之前在css中设置好的变量，更多写法欢迎各位在评论去扩展

接下来就是重点了，主题的切换，

当然这个切换的主题，你可以专门去写个公共方法，

//  主题样式的变更
Vue.prototype.$$setColor = function (ole) {
  if (ole == 'red') {
    document.documentElement.style.setProperty('--blue-blue', "#d93838")
    document.documentElement.style.setProperty('--blue-index-blue', "#F54B2F")
    

  } else {
    document.documentElement.style.setProperty('--blue-blue', "#4293f4")
    document.documentElement.style.setProperty('--blue-index-blue', "#377fd4")

  }
  this.$store.commit('sethomeBackground',"")

}

其实就是改变根元素 :root{} 中的这个变量，然后修改这个值，这个值改变了，也会实时渲染在页面上。

当然其它的写法还可以是指定某个元素下的，我也就不扩展去说了，

 这就可以实现颜色值的切换，

二，如果切换背景图片

我在我这里用到了一个变量，

我是这样写的

v-bind:style="{backgroundImage:'url(' + this.$store.state.homeBackground + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center bottom'}"

改变值的时候，我直接改变vuex中的homeBackground，这个值，当然你的图片如果是打包后的，你这个值的写法一定要是

require('../assets/img/banner1.png')    //这样的

因为这样你才可以真的引入打包后的真实图片地址。

如果你学到了，不妨来个 点赞，收藏，评论，转发，加关注，如果您可以给个赞赏就更好了