目录
一、背景
二、实现思路
方法1：定义全局的CSS变量
方法2：切换已定义好的css文件
方法3：切换顶级CSS类名 (需使用css处理器,如sass、less等)
一、背景
在我们开发中我们会遇到像是需要切换程序风格、主题切换啦这种应用场景。
参考大佬博客！！！
vue中实现 ‘换肤 / 切换样式主题’ 功能的三种方式详解（纯干huo）_vue换肤_Jason Ma丶丶前端工程师的博客-CSDN博客
vue中实现 ‘换肤 / 切换样式主题’ 功能的三种方式详解（纯干huo）_vue换肤_Jason Ma丶丶前端工程师的博客-CSDN博客
二、实现思路
方法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>
效果：文章来源：https://www.toymoban.com/news/detail-474747.html
文章来源地址https://www.toymoban.com/news/detail-474747.html
到了这里，关于（详解）vue中实现主题切换的三种方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
