（详解）vue中实现主题切换的三种方式_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>

效果：