vite-plugin-theme插件的使用

vite-plugin-theme 是一个 Vite 插件，用于在 Vue.js 项目中动态切换主题。它基于 CSS 变量实现，可以根据不同的主题设置不同的变量值，从而改变页面的样式。

下面是 vite-plugin-theme 的使用步骤：

1. 安装插件

npm install vite-plugin-theme --save-dev

2. 配置 vite.config.js 文件

在项目根目录下创建 vite.config.js 文件，并添加以下配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import themePlugin from 'vite-plugin-theme'

export default defineConfig({
  plugins: [
    vue(),
    themePlugin({
      // 配置主题变量
      themeVariables: [
        '--primary-color',
        '--secondary-color'
      ],
      // 配置主题列表
      themes: {
        light: {
          // 主题变量值
          '--primary-color': '#42b983',
          '--secondary-color': '#35495e'
        },
        dark: {
          // 主题变量值
          '--primary-color': '#1abc9c',
          '--secondary-color': '#2c3e50'
        }
      }
    })
  ]
})

3. 在组件中使用主题变量

在 Vue.js 组件中，可以使用 CSS 变量来引用主题变量。例如：

<style>
  .title {
    color: var(--primary-color);
  }
</style>

<template>
  <h1 class="title">Hello, World!</h1>
</template>

4. 切换主题

要切换主题，可以在 JavaScript 中使用 `themePlugin` 对象提供的 `changeTheme` 方法。例如：

import { themePlugin } from 'vite-plugin-theme'

themePlugin.changeTheme('dark')

这将把主题切换为 dark。注意，这个方法必须在 Vue.js 实例创建之前调用。

以上就是 vite-plugin-theme 的使用步骤，希望能对你有所帮助！