如何建设网站24小时接单手把手教你优化网站
目录
一.了解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-switchv-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 } // 深度监视，确保对象内部属性的变化也能被捕捉
)六.【皮肤主题切换功能】的最终效果展示
结语
以上就是【皮肤主题切换功能】的全部内容。
该功能的实现方式不止一种，我这种方式也不一定是最好的，只是作为一种了解该功能的入门方式，仅供大家参考和了解知识。
喜欢本篇文章的话，可以留个免费的关注~~