Vue3+ElementPlus实现主题切换（暗亮色）

最新推荐文章于 2025-02-24 15:55:46 发布

骑码钓鱼v

最新推荐文章于 2025-02-24 15:55:46 发布

阅读量1.6k

点赞数 10

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/avdgrgg/article/details/143873162

版权

一、前言

网站切换主题的原理是通过css变量，即为定义的颜色复制给相应的css变量，通过控制css变量的值来实现切换主题，本文章讲述如何使用elementPlus实现暗亮色的切换。

ElementPlus2.2.0版本以后，支持了暗黑模式，底层还是通过控制css变量来实现的。

二、切换暗黑主题

2.1构建项目

首先要构建一个vue3项目，并引入ElementPlus组件库，引入组件库请参考官网快速开始 | Element PlusA Vue 3 based component library for designers and developershttps://element-plus.org/zh-CN/guide/quickstart.html

2.2切换暗黑主题

只需在项目的index.html文件的<html>标签内添加dark类名，如下图所示

执行该操作后，项目中所有使用的ElementPlus组件都会转化为黑色（样式覆盖除外），反之，若添加class="light"类名则会显示亮色。

2.3动态切换

那么如何实现动态切换呢，此时只需通过js动态添加dark类名即可，这里我引入<el-switch>来控制类名。

import { useDark } from "@vueuse/core";

//切换主题
const isDark = useDark();
<el-switch v-model="isDark" :active-icon="Moon" :inactive-icon="Sunny" inline-prompt @change="customToggleDark"/>

其中useDark 是 @vueuse/core 库中的一个组合式函数，用于检测和切换用户界面的暗模式（dark mode）。它可以帮助开发者轻松地在应用中实现暗模式功能。要使用 @vueuse/core，你需要先安装它：npm install @vueuse/core

customToggleDark方法为控制添加类名

const customToggleDark = (e) => {
  console.log(e);
  if (e) {
    //暗色主题
    const theme = 'dark'
    const theme = userStore.savedThem
    document.documentElement.setAttribute('class',theme)
  } else {
    //亮色主题
    const theme = 'light'
    const theme = userStore.savedThem
    document.documentElement.setAttribute('class',theme)
  }
};

此时便可以通过el-switch开关控制主题切换