使用 Element Plus 和 Sass 实现自定义主题切换

使用 Element Plus 和 Sass 实现自定义主题切换

下面我将介绍如何使用 Element Plus 和 Sass 实现一个用户可以自由切换主题的系统。

方案概述

1. 使用 Sass 变量定义主题样式
2. 利用 CSS 变量实现动态主题切换
3. 结合 Element Plus 的主题变量
4. 通过 JavaScript 动态切换主题

实现步骤

1. 安装依赖

首先确保已安装 Element Plus 和 Sass：

npm install element-plus sass

2. 定义主题变量

创建 src/styles/themes.scss 文件：

// 默认主题变量
:root {
  // 主色
  --el-color-primary: #409eff;
  --el-color-primary-light-3: #79bbff;
  --el-color-primary-light-5: #a0cfff;
  --el-color-primary-light-7: #c6e2ff;
  --el-color-primary-light-8: #d9ecff;
  --el-color-primary-light-9: #ecf5ff;
  --el-color-primary-dark-2: #337ecc;
  
  // 成功色
  --el-color-success: #67c23a;
  // 警告色
  --el-color-warning: #e6a23c;
  // 危险色
  --el-color-danger: #f56c6c;
  // 信息色
  --el-color-info: #909399;
  
  // 背景色
  --el-bg-color: #ffffff;
  --el-bg-color-page: #f2f3f5;
  
  // 文字色
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  
  // 边框色
  --el-border-color: #dcdfe6;
}

// 暗黑主题
[data-theme="dark"] {
  --el-color-primary: #409eff;
  --el-color-primary-light-3: #333842;
  --el-color-primary-light-5: #2b2d35;
  --el-color-primary-light-7: #25272e;
  --el-color-primary-light-8: #1e2027;
  --el-color-primary-light-9: #181a20;
  
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-info: #909399;
  
  --el-bg-color: #141414;
  --el-bg-color-page: #0a0a0a;
  
  --el-text-color-primary: #e5eaf3;
  --el-text-color-regular: #cfd3dc;
  
  --el-border-color: #4c4d4f;
}

// 自定义主题示例 - 紫色主题
[data-theme="purple"] {
  --el-color-primary: #722ed1;
  --el-color-primary-light-3: #9254de;
  --el-color-primary-light-5: #b37feb;
  --el-color-primary-light-7: #d3adf7;
  --el-color-primary-light-8: #efdbff;
  --el-color-primary-light-9: #f9f0ff;
  --el-color-primary-dark-2: #531dab;
  
  --el-bg-color: #f9f0ff;
  --el-bg-color-page: #f0e6ff;
  
  --el-text-color-primary: #1f0d39;
  --el-text-color-regular: #3a2065;
  
  --el-border-color: #d3adf7;
}

3. 在项目中引入主题

在 main.js 中引入 Element Plus 和主题文件：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './styles/themes.scss' // 引入主题文件
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

4. 创建主题切换组件

创建 src/components/ThemeSwitcher.vue：

<template>
  <el-dropdown @command="handleCommand" trigger="click">
    <span class="el-dropdown-link">
      <el-icon :size="20"><Setting /></el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="default">默认主题</el-dropdown-item>
        <el-dropdown-item command="dark">暗黑主题</el-dropdown-item>
        <el-dropdown-item command="purple">紫色主题</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import { Setting } from '@element-plus/icons-vue'

const handleCommand = (command) => {
  document.documentElement.setAttribute('data-theme', command)
  localStorage.setItem('theme', command)
}
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
}
</style>

5. 在 App.vue 中初始化主题

<template>
  <div id="app">
    <theme-switcher />
    <!-- 其他内容 -->
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import ThemeSwitcher from './components/ThemeSwitcher.vue'

onMounted(() => {
  const savedTheme = localStorage.getItem('theme') || 'default'
  document.documentElement.setAttribute('data-theme', savedTheme)
})
</script>