上正文使用：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，这里我在一个文件中定义了三个主题，每个主题中背景文件不同
/*公共主题部分引入*/@importurl(@/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
@importurl(@/assets/css/theme/theme.css);@importurl(@/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(){//我这里是一个按时间月修改主题constdate=newDate();letmonth=date.getMonth()1;document.documentElement.setAttribute("theme","month-"month);}}
访客