Vue主题颜色切换

Vue主题颜色切换

切换顶级类名，需要使用css处理器(例如:less\scss)编译

先设定一个样式集合

src/assets/css/theme.less：

/* 预设四种主题 */
.theme_1 {
  .myButton3 {
    background: #00ff7f;
  }
  .myDiv3 {
    background: #00ff7f;
  }
}

.theme_2 {
  .myButton3 {
    background: #00ff7f;
  }
  .myDiv3 {
    background: #00ff7f;
  }
}

.theme_3 {
  .myButton3 {
    background: #00ff7f;
  }
  .myDiv3 {
    background: #00ff7f;
  }
}

.theme_4 {
  .myButton3 {
    background: #00ff7f;
  }
  .myDiv3 {
    background: #00ff7f;
  }
}

main.js

// 方式3：需要先引入全局主题样式文件 
import "./assets/css/theme.less";

App.vue

<script>
import { onMounted } from "vue";
export default {
  name: "App",
  components: {},
  setup() {
    onMounted(() => {
      console.log("App.vue ---- onMounted");
        
     //方式3（设置顶层div的class类名）
      document.getElementById("app").setAttribute("class", "theme_1");

    return {};
  },
};
</script>

demo.vue

<h3>换肤 / 切换样式主题 方式3：</h3>
<button @click="changeTheme3(1)">换肤为Moccasin</button>
<button @click="changeTheme3(2)">换肤为#1E90FF</button>
<button @click="changeTheme3(3)">换肤为#00FF7F</button>
<button @click="changeTheme3(4)">换肤为DeepPink</button>
<button class="myButton3">我是一个可以换肤的按钮</button>
<div class="myDiv3">我是一个可以换肤的div</div>
<script>
export default {
  setup() {
   // 切换主题方式3：切换顶级CSS类名 (需使用处理器)
    let changeTheme3 = (type) => {
      document.getElementById("app").setAttribute("class", `theme_${type}`);
    };

    return { changeTheme3  };
  },
};
</script>