方式1:定义全局的CSS变量
App.vue:
<style> /* 定义全局的css变量 */ :root { /* 背景色 */ --theme_bg_color: red; /* 按钮颜色 */ --theme_button_color: yellowgreen; } </style>
demo.vue(css):
<style scoped> /* 使用全局的css变量设置颜色 */ .myButton { background: var(--theme_bg_color); } .myDiv { background: var(--theme_button_color); width: 200px; height: 200px; } </style>
demo.vue(html):
<h3>换肤 / 切换样式主题 方式1:</h3> <button @click="changeTheme('Moccasin')">换肤为Moccasin</button> <button @click="changeTheme('#1E90FF')">换肤为#1E90FF</button> <button @click="changeTheme('#00FF7F')">换肤为#00FF7F</button> <button @click="changeTheme('DeepPink')">换肤为DeepPink</button> <button class="myButton">我是一个可以换肤的按钮</button> <div class="myDiv">我是一个可以换肤的div</div>
demo.vue(js):
<script> export default { setup() { // 切换主题方式1:修改全局CSS变量 let changeTheme = (color) => { document.documentElement.style.setProperty("--theme_bg_color", color); document.documentElement.style.setProperty("--theme_button_color", color); }; return { changeTheme }; }, }; </script>
效果:
方式2:切换已定义好的css文件
Public/css/theme_1.css:
.myButton2{ background: Moccasin; } .myDiv2 { background: Moccasin; }
App.vue:
<script> import { onMounted } from "vue"; export default { name: "App", components: {}, setup() { onMounted(() => { console.log("App.vue ---- onMounted"); //方式2(创建link标签默认引入 ./css/theme_1.css 主题样式文件) let link = document.createElement("link"); link.type = "text/css"; link.id = "theme"; link.rel = "stylesheet"; link.href = "./css/theme_1.css"; document.getElementsByTagName("head")[0].appendChild(link); }); return {}; }, }; </script>
demo.vue(html):
<h3>换肤 / 切换样式主题 方式2:</h3> <button @click="changeTheme2(1)">换肤为Moccasin</button> <button @click="changeTheme2(2)">换肤为#1E90FF</button> <button @click="changeTheme2(3)">换肤为#00FF7F</button> <button @click="changeTheme2(4)">换肤为DeepPink</button> <button class="myButton2">我是一个可以换肤的按钮</button> <div class="myDiv2">我是一个可以换肤的div</div>
demo.vue(js):
<script> export default { setup() { // 切换主题方式2:切换已定义好的css文件 let changeTheme2 = (type) => { document.getElementById("theme").href = `./css/theme_${type}.css`; }; return { changeTheme2 }; }, }; </script>
效果:
方式3:切换顶级CSS类名 (需使用css处理器,如sass、less等)
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(html):
<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>
demo.vue(js):
<script> export default { setup() { // 切换主题方式3:切换顶级CSS类名 (需使用处理器) let changeTheme3 = (type) => { document.getElementById("app").setAttribute("class", `theme_${type}`); }; return { changeTheme3 }; }, }; </script>
效果:
文章来源: vue中实现 ‘换肤 / 切换样式主题’ 功能的三种方式详解(纯干huo)_vue 换肤_Jason Ma丶丶前端工程师的博客-CSDN博客