Vite切换主题

@zougt/vite-plugin-theme-preprocessor 是一个 Vite 插件，用于预处理主题相关的文件。dist/browser-utils 目录通常包含在浏览器环境中使用的工具函数和脚本。在这个插件中，这些工具函数可能用于动态切换主题、处理样式等操作。

安装插件

npm install @zougt/vite-plugin-theme-preprocessor

配置插件

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { themePreprocessorPlugin } from '@zougt/vite-plugin-theme-preprocessor';

export default defineConfig({
  plugins: [
    vue(),
    themePreprocessorPlugin({
      less: {
        multipleScopeVars: [
          {
            scopeName: 'theme-default',
            path: 'src/themes/default.less',
          },
          {
            scopeName: 'theme-dark',
            path: 'src/themes/dark.less',
          },
        ],
      },
    }),
  ],
});

使用 dist/browser-utils

假设你需要在浏览器端使用一些工具函数来切换主题，这些工具函数可能位于 dist/browser-utils 中。你可以通过以下方式引入并使用它们：\

import { switchTheme } from '@zougt/vite-plugin-theme-preprocessor/dist/browser-utils';

// 切换到暗主题
switchTheme('theme-dark');

// 切换回默认主题
switchTheme('theme-default');

在实际应用中，你可能会有一个按钮来切换主题。以下是一个简单的示例：

document.getElementById('themeSwitcher').addEventListener('click', () => {
  const currentTheme = document.body.getAttribute('data-theme');
  if (currentTheme === 'theme-default') {
    switchTheme('theme-dark');
    document.body.setAttribute('data-theme', 'theme-dark');
  } else {
    switchTheme('theme-default');
    document.body.setAttribute('data-theme', 'theme-default');
  }
});

总结

@zougt/vite-plugin-theme-preprocessor 插件通过配置多主题的预处理器来帮助你在 Vite 项目中实现动态主题切换。dist/browser-utils 中的工具函数可以简化在浏览器端的主题切换逻辑。通过引入和调用这些函数，可以轻松实现基于按钮的主题切换功能。