在 Vue3 + Element-Plus + TypeScript 中轻松实现动态主题色切换

2023-10-18 09:53:49

引言

在构建现代 web 应用程序时，自定义用户体验至关重要。其中一个关键因素是主题定制，它可以让用户根据自己的喜好调整应用程序的外观。本文将深入探讨如何在 Vue3 + Element-Plus + TypeScript 应用中实现动态主题色切换，为用户提供个性化的体验。

技术栈

Vue.js v3
Element-Plus v2
TypeScript v4

一、思路分析

根据 Element-Plus 官方推荐，实现主题色切换的最佳实践是覆盖 CSS 变量。要做到这一点，我们需要了解 Element-Plus 如何定义其主题色。

二、代码实现

1. 安装依赖

首先，我们需要安装必要的依赖项：

npm install --save-dev @element-plus/theme-chalk

2. 创建自定义主题

接下来，让我们创建一个自定义主题文件，将我们的主题色覆盖在 Element-Plus 默认主题之上。在 src 目录下创建 theme.scss 文件：

// @filename: theme.scss
// 引入 Element Plus 默认主题
@import '@element-plus/theme-chalk/src/index.scss';

// 覆盖主题色变量
:root {
  --el-color-primary: #0090FF;  // 自定义主题色
}

3. 在 main.ts 中注册主题

在 main.ts 文件中，我们使用 createApp 函数注册自定义主题：

// @filename: main.ts
import { createApp } from 'vue';
import { App } from './App.vue';
import './theme.scss'; // 引入自定义主题

createApp(App).mount('#app');

三、实现动态切换

现在，我们已经创建了一个自定义主题，我们需要实现动态切换功能。

1. 状态管理

为了在组件之间共享主题色状态，我们可以使用 Vuex 状态管理库。在 store 目录下创建一个 theme.ts 文件：

// @filename: store/theme.ts
import { defineStore } from 'pinia';

export const useThemeStore = defineStore('theme', {
  state: () => ({
    currentColor: '#0090FF', // 初始主题色
  }),
  actions: {
    setThemeColor(color: string) {
      this.currentColor = color;
    },
  },
});

2. 组件中使用

在需要动态切换主题色的组件中，我们可以使用 useThemeStore 钩子访问状态：

// @filename: MyComponent.vue
<script setup>
import { useThemeStore } from '@/store/theme';

const themeStore = useThemeStore();

// 监听主题色变化
watch(() => themeStore.currentColor, (color) => {
  // 更新组件样式
  document.documentElement.style.setProperty('--el-color-primary', color);
});
</script>