当前位置：首页 > news >正文

vue项目中，添加主题皮肤切换功能

news 来源：原创 2025/6/21 12:07:12

一.了解Element-Plus的暗黑模式

1.使用前的页面效果

2.使用步骤

3.使用后的页面效果

4.目前存在的问题

二.在数据库的user表中，定义skin字段

三.在前端，根据pinia的用户信息，动态添加/移除class="dark"样式

四.根据pinia的用户信息，动态绑定左侧菜单和顶部页眉的背景色

1.动态绑定左侧菜单的背景色

2.动态绑定顶部页眉的背景色

3.效果展示

五.定义一个开关，用来切换某个用户的皮肤主题

1.代码

2.效果展示

3.仍存在的问题

4.解决办法

六.【皮肤主题切换功能】的最终效果展示

结语

一.了解Element-Plus的暗黑模式

1.使用前的页面效果

2.使用步骤

第一步：在main.js文件中，引入如下css样式

第二步：在index.html文件的<html></html>标签上，添加class="dark"。

3.使用后的页面效果

4.目前存在的问题

由于这个暗黑模式，是Element-plus研发的，因此只有Element-plus的组件才会切换黑色。而上图中，左侧菜单和顶部页眉都是我们自己写的div容器，因此不会切换成黑色。

解决办法：见下。

二.在数据库的user表中，定义skin字段

该skin字段，类型为int（整型），1代表日间模式， 2代表夜间模式（暗黑模式）。

同时别忘了在java实体类中添加相应属性：

同时也要在前端的pinia的userStore.js中，添加skin属性，以便在用户登录成功时，就将用户的主题保存起来，供后续使用。

三.在前端，根据pinia的用户信息，动态添加/移除class="dark"样式

在header.vue组件中（其实任何一个组件都行，只不过以后我们要将控制主题切换的开关写在这个组件中，因此这段代码就写在这个组件中吧），添加如下代码：

import { onMounted } from 'vue';

/* 使用pinia的UserStore.js中的数据user */
import userStore from "@/store/UserStore";
const userStoreInfo = userStore();
const user = userStoreInfo.user;


//该组件挂载时，就设置是否添加class="dark"样式
onMounted(() => {
    //页面挂载时，根据数据库的用户皮肤主题，渲染页面的主题
    if(user.skin == 1){
      //此时为日间状态，移除html的dark样式
      document.documentElement.classList.remove('dark'); //该段代码表示：移除index.html的<html>标签上的class="dark"样式
    }
    if(user.skin == 2){
      //此时为夜间状态，添加html的dark样式
      document.documentElement.classList.add('dark'); //该段代码表示：添加index.html的<html>标签上的class="dark"样式
    }
});

效果展示1：

比如这个用户【李思】，我们将其skin字段设为1，代表是日间模式。然后我们使用李思的账号登录系统，查看效果：

效果展示2：

比如这个用户【王磊】，我们将其skin字段设为2，代表是夜间模式（暗黑模式）。然后我们使用王磊的账号登录系统，查看效果：

可见此时仍在存在：element-plus以外的元素，不能切换暗黑模式。

四.根据pinia的用户信息，动态绑定左侧菜单和顶部页眉的背景色

1.动态绑定左侧菜单的背景色

2.动态绑定顶部页眉的背景色

3.效果展示

用户【李思】登录系统：（日间模式）

用户【王磊】登录系统：（夜间模式）

可见此时就解决了element-plus以外的元素无法切换暗黑模式的问题。

五.定义一个开关，用来切换某个用户的皮肤主题

1.代码

<!-- 主题切换开关 -->
  <el-switch
    v-model="isDark"
    size="large"
    style="position:fixed;top:5px;right:180px;--el-switch-on-color: #2C2C2C; --el-switch-off-color: #D0CCCC;--el-switch-border-color: #FFFFFF"
    @change="changeSkin"
  >
    <!-- 开关关闭时（日间状态），显示小太阳 -->
    <template #inactive-action>
      <el-icon color="#121212"><Sunrise /></el-icon>
    </template>
    <!-- 开关打开时（夜间状态），显示小月亮 -->
    <template #active-action>
      <el-icon color="#121212"><Moon /></el-icon>
    </template>
</el-switch>


//控制开关的激活状态
const isDark = ref(user.skin == 2);


//主题切换成功后，触发的事件
const changeSkin = async () => {
  //alert("当前主题为：" + user.skin)

  //alert("切换主题");
  if(isDark.value == false){
    //向后端发送请求，修改该用户的皮肤状态为【日间模式】
    const data = {
      skin: isDark.value == true? "2" : "1"
    }
    const res1 = await updateUserSkin(user.id, data);
    if(res1.code == 200){
      //后台修改皮肤主题（skin=1）成功后，才移除dark样式
      document.documentElement.classList.remove('dark'); 
      //提示“天亮了~”
      ElMessage.success({
        message:"日间模式~",
        duration:1500,//显示1.5秒后自动关闭
        icon:Sunrise,//图标设置为小太阳
      })
      //更新pinia中的userStore.js的skin属性
      user.skin = 1;
    }
  }
  
  if(isDark.value == true){
    //向后端发送请求，修改该用户的皮肤状态为【夜间模式】
    const data = {
      skin: isDark.value == true? "2" : "1"
    }
    const res2 = await updateUserSkin(user.id, data);
    if(res2.code == 200){
      //后台修改皮肤主题（skin=2）成功后，才添加dark样式
      document.documentElement.classList.add('dark');
      //提示“天黑了~”
      ElMessage.info({
        message:"夜间模式~",//显示的内容
        duration:1500,//显示1.5秒后自动关闭
        icon:MoonNight,//图标设置为小月亮
      })
      //更新pinia中的userStore.js的skin属性
      user.skin = 2;
    }
    
  }
  
}

解读上述代码：

①v-model="isDark"。如果user.skin = 2时，isDark的值为true，表示此时开关处于打开状态，为夜间模式；如果user.skin = 1时，值为false，表示此时开关处于关闭状态，为日间模式。

②size="large",表示使用大号开关组件。

③style="position:fixed;top:5px;right:180px;--el-switch-on-color: #2C2C2C; --el-switch-off-color: #D0CCCC;--el-switch-border-color: #FFFFFF"表示定义的一些开关的样式，如果想详细了解可以去element-plus官网搜索el-switch组件。

④@change="changeSkin"，代表点击开关且开关的状态发生改变后，触发的事件。我们在该事件中，实现了修改数据库user表的skin字段的值，如果修改成功，则做三件事，即：添加/移除class="dark"、提示切换主题成功、更新pinia中的用户的skin属性。

2.效果展示

3.仍存在的问题

如上如所示，当我们切换开关时，左侧菜单和顶部页眉的背景色没变化。

有可能大家会产生疑问，我们在【四】中，难道不是解决了这个问题么？

【四】中的问题，解决的是用户登录系统后，初始化该用户的主题，确实能实现左侧和顶部的背景色渲染。但是现在的问题是，数据库的skin字段发生了变化，左侧和顶部的背景色不能相应变化。

4.解决办法

发现规律：数据库的skin被修改时，我们上面也会修改pinia中的用户信息的skin属性。

因此我们只需要使用watch来监视这个user.skin属性，来渲染对应的左侧菜单和顶部页眉的背景色即可。

左侧菜单组件（aside.vue）,添加如下代码：

import {ref, watch} from 'vue'


//监视pinia中userStore.js中的数据变化（使用场景：主题皮肤切换）
watch(
  () => user.skin,//监视pinia中的对象的主题皮肤属性
  (newValue, oldValue) => {
    //alert("主题皮肤发生了变化，从：" + oldValue + " 到" + newValue);
    if(newValue == 1){
      //将菜单的背景颜色改为【深蓝色】
      bgColor.value = "#143f6b";

    }
    if(newValue == 2){
      //将菜单的背景颜色改为【深黑色】
      bgColor.value = "#1D1E1F";
    }
  },
  { deep: true } // 深度监视，确保对象内部属性的变化也能被捕捉
)

顶部组件（header.vue），添加如下代码：

//监视pinia中userStore.js中的数据变化（使用场景：主题皮肤切换）
watch(
  () => user.skin,//监视pinia中的对象的主题皮肤属性
  (newValue, oldValue) => {
    //alert("主题皮肤发生了变化，从：" + oldValue + " 到" + newValue);
    if(newValue == 1){
      //将菜单的背景颜色改为【深蓝色渐变】
      bgColor.value = "linear-gradient(to right, #AAC0D7, #215D9B)";

    }
    if(newValue == 2){
      //将菜单的背景颜色改为【深黑色渐变】
      bgColor.value = "linear-gradient(to right, #5D5D5C, #121212)";
    }
  },
  { deep: true } // 深度监视，确保对象内部属性的变化也能被捕捉
)