vue pc端换肤功能

1.在点击更换主题页面得地方 使用setAttribute设置自定义属性 并把变量存起来

handleChangeTheme(theme) {
                window.document.documentElement.setAttribute('data-theme', theme)
                localStorage.setItem("theme", theme);
            },

2.在主文件入口 main.js 先判断默认得自定义属性值是哪个 如果没有的话使用默认得值
也使用setAttribute设置自定义属性

if(!theme){
  theme="theme2";
}
window.document.documentElement.setAttribute('data-theme', theme);

如图

3.然后写相应得样式即可 使用scss预处理器 data-theme等于哪个变量值就使用哪个得样式

.public-nav {
  background: rgba(0, 31, 56, 1);

  [data-theme="theme1"] & {
    box-shadow: 6px 0px 20px rgba(0, 217, 213, 0.5);
  }

  [data-theme="theme2_skyblue"] & {
    background: #fff;
    box-shadow: 6px 0px 12px rgba(18, 106, 233, 0.5);
  }
}