项目换肤具体流程

第一步当然是有换肤的切换选项了,当我们点了之后需要切换什么颜色为了方便下次进入还是选中的肤色就存入了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);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值