一、背景
在我们开发中我们会遇到像是需要切换程序风格、主题切换啦这种应用场景。
二、实现思路
方法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>
效果：
