方式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>
效果：
[图片上传失败...(image-c7afd3-1640662035396)]
方式2：切换已定义好的css文件
Public/css/theme_1.css：
.myButton2{
background: Moccasin;
}
.myDiv2 {
background: Moccasin;
}
[图片上传失败...(image-e00dc1-1640661903141)]
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>
效果：
[图片上传失败...(image-ed39bb-1640662035396)]
方式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;
}
}
[图片上传失败...(image-b46701-1640662035396)]
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>
效果：
[图片上传失败...(image-f6b84f-1640662035396)]
文章来源
https://blog.csdn.net/qq_42753705/article/details/122130144?spm=1001.2014.3001.5501
https://juejin.cn/post/7046589910144253966
