第一步当然是有换肤的切换选项了,当我们点了之后需要切换什么颜色为了方便下次进入还是选中的肤色就存入了sessionStorage或 localStorage
app.vue 总页面中当我们进行换肤控制
const skin = localStorage.getItem('skin')
? localStorage.getItem('skin')
: 'white';
document.body.classList.add(skin + 'Theme');
具体步鄹就是进行获取需要用那种肤色,如果没有的话默认是什么颜色,然后可以定义变量在最外层的标签上
然后写好之后我们就可以创建换样式文件,然后全部引入公共样式文件中,然后根据我们定义取到的名字来写
引入样式文件最好是放入公共文件的最上方,
@import url("./white.css");
比如我们定义的名字是whiteSkin 那么如下:
.whiteSkin {
--scrollBar: rgba(26, 183, 231, 0.2);
--scrollBarThumb: #0f6dac;
--noColor: rgba(0, 0, 0, 0);
--color: #ffffff;
--bodyColor: #c0cce5;
}
使用的话就是
backGround: var(--color);