VUE动态切换皮肤 VUE动态切换背景图片 操作 / VUE 主题切换_vue theme

上正文  使用：root ，var（）函数实现

1. 创建皮肤或主题 css目录

 一个公共主题文件 theme.css，一个main.js引入文件theme-all.css，一个单独的 主题样式文件 theme-12.css

2. 定义css文件中所要切换的主题的 部分样式 例如 文字颜色，背景颜色，背景图，或者个图标文件等 

这里使用 背景图片作为演示 

  设置公共主题文件所需样式 theme.css ，这里我引入了自己的 12张 图片 小伙伴看清楚噢

@charset "UTF-8";
:root{
  /*--login-back-image: url(@/assets/background/bg_1.jpg);*/
  --login-back-image-month-1: url(@/assets/background/bg_1.jpg);
  --login-back-image-month-2: url(@/assets/background/bg_2.jpg);
  --login-back-image-month-3: url(@/assets/background/bg_3.jpg);
  --login-back-image-month-4: url(@/assets/background/bg_4.jpg);
  --login-back-image-month-5: url(@/assets/background/bg_5.jpg);
  --login-back-image-month-6: url(@/assets/background/bg_6.jpg);
  --login-back-image-month-7: url(@/assets/background/bg_7.jpg);
  --login-back-image-month-8: url(@/assets/background/bg_8.jpg);
  --login-back-image-month-9: url(@/assets/background/bg_9.jpg);
  --login-back-image-month-10: url(@/assets/background/bg_10.jpg);
  --login-back-image-month-11: url(@/assets/background/bg_11.jpg);
  --login-back-image-month-12: url(@/assets/background/bg_12.jpg);
}

  设置单独的一个样式文件 theme-12.css， 这里我在一个文件中定义了三个主题，每个主题中背景文件不同

/*公共主题部分引入*/
@import url(@/assets/css/theme/theme.css);
 
 
/*定义样式 主题名称*/
:root[theme='month-1'] { 
    /*登录背景图片*/
    --login-back-image: var(--login-back-image-month-1);
    --title-text-color: #498be8;
}
/*定义样式 主题名称*/
:root[theme='month-2'] { 
    /*登录背景图片*/
    --login-back-image: var(--login-back-image-month-2);
    --title-text-color: #498be8;
}
/*定义样式 主题名称*/
:root[theme='month-3'] { 
    /*登录背景图片*/
    --login-back-image: var(--login-back-image-month-3);
    --title-text-color: #498be8;
}

设置所有 需要引入的 css 样式 theme-all.css

@import url(@/assets/css/theme/theme.css);
@import url(@/assets/css/theme/theme-12.css);

3.在你的main.js中全局引入css文件  theme-all.css

import "@/assets/css/theme/theme-all.css";

4.使用定义的 主题样式 比如 我在我的登录页xxx.vue中 引入主题中的 背景图片 就是 在 theme-12.css中定义的 --login-back-image 这个 背景图片 使用 var(--login-back-image)写入

.back {
  width: 100%;
  height: 100%;
  background-image: var(--login-back-image);
  background-repeat: no-repeat;
  background-size: 100%;
  display: flex;
  align-items: center;
}

5.定义主题切换方法，并使用 

我这里是根据日期月份 自动渲染 主题, 如果需要手动切换 ，自行再写 click事件 传入 需要的 主题样式 的名称 就行

mounted() {
    this.setTheme();
},  
methods: {//定义一个改变 主题文件的 方法
    setTheme() {
        //我这里是一个按时间 月 修改主题
      const date = new Date();
      let month = date.getMonth() + 1;
      document.documentElement.setAttribute("theme","month-"+month);
   
    }
  }