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

雨点打透心脏的1/2处 2023-10-10 23:57 11阅读 0赞

**目录**

一、背景

二、实现思路

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

**demo.vue（css）：**

**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）：**

**效果：**

![83ec5cdb1e8e40a1a03c0a4785059dd6.png][]

### 方法**2：切换已定义好的css文件** ###

**Public/css/theme\_1.css：**

.myButton2{
      background: Moccasin;
    }
    .myDiv2 {
      background: Moccasin;
    }

![2113a73ef3e549118edf35db361abd69.png][]

**App.vue：**

**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）：**

**效果：**

![747ae64ace6548d5bf54d175264f6bbc.png][]

### 方法**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;
      }
    }

![f65b0ab47a884358bc9a3f4fec41e6b6.png][]

**main.js：**

// 方式3：需要先引入全局主题样式文件 
    import "./assets/css/theme.less";

**App.vue：**

**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）：**

**效果：**

![e5875e839d6149e79eae69a9f9e423d2.png][]

[vue_ _ _ _ _huo_vue_Jason Ma_-CSDN]: https://blog.csdn.net/qq_42753705/article/details/122130144?spm=1001.2014.3001.5502
[83ec5cdb1e8e40a1a03c0a4785059dd6.png]: https://img-blog.csdnimg.cn/83ec5cdb1e8e40a1a03c0a4785059dd6.png
[2113a73ef3e549118edf35db361abd69.png]: https://img-blog.csdnimg.cn/2113a73ef3e549118edf35db361abd69.png
[747ae64ace6548d5bf54d175264f6bbc.png]: https://img-blog.csdnimg.cn/747ae64ace6548d5bf54d175264f6bbc.png
[f65b0ab47a884358bc9a3f4fec41e6b6.png]: https://img-blog.csdnimg.cn/f65b0ab47a884358bc9a3f4fec41e6b6.png
[e5875e839d6149e79eae69a9f9e423d2.png]: https://img-blog.csdnimg.cn/e5875e839d6149e79eae69a9f9e423d2.png