前端实现一键换肤

一、 Vue项目实现换肤 

   方法一：动态修改全局CSS变量 

        
          1. 在全局css文件或 app.vue中定义全局CSS变量

<style>
:root{
    --theme_bg_color:red
}
</style>

·        2. 使用全局CSS变量定义元素样式

<style scoped>
    .myTitle{
        background: var(--theme_bg_color);
    }
</style>

        3.  切换主题（修改全局CSS变量）

changeTheme() {
    document.documentElement.style.setProperty("--theme_bg_color","green");
}

        效果演示代码如下：        

<div>
    <button @click="changeTheme">换肤</button>
    <div class="myTitle">你好</div>
</div>

方法二：切换主题CSS文件

        1. 新建多套主题的css文件，放在 public 文件夹的css文件夹中

public/css/theme_green.css

.bg {
    background: green;
}
public/css/theme_red.css

.bg {
    background: red;
}

        2. 设置默认主题（初始化样式）

src/App.vue

mounted(){
    let link = document.createElement('link');
    link.type = 'text/css';
    link.id = "theme";
    link.rel = 'stylesheet';
    link.href = './css/theme_red.css';
    document.getElementsByTagName("head")[0].appendChild(link);
},

        3. 切换主题

changeTheme(){
    document.getElementById('theme').href = './css/theme_green.css'
}

        效果演示代码如下：

 <div>
        <button @click="changeTheme">换肤</button>
        <div class="bg">你好</div>
    </div>

方法三：切换顶级CSS类名

需使用css预处理器，此处以 sass为例

        1. 新建主题样式文件

src/assets/styles/theme.scss

.theme_red{
  .head{
    background: red;
  }
}
 
.theme_green{
  .head{
    background: green;
  }
}

        2. 全局引入主题样式文件

src/main.js

// 全局主题样式
import './assets/styles/theme.scss'

        3. 设置默认主题（初始化样式）

src/App.vue

mounted() {
    document.getElementById('app').setAttribute('class', 'theme_red')
},

        4. 切换主题        

changeTheme() {
    document.getElementById('app').setAttribute('class', 'theme_green')
}

        效果演示代码如下：

<div>
    <button @click="changeTheme">换肤</button>
    <div class="head">你好</div>
</div>