上正文  使用：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); } }