（详解）vue中实现主题切换的三种方式

目录

一、背景

二、实现思路 

方法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>

效果：