第五十七章-Vite插件-vite-plugin-theme

1.说明

vite-plugin-theme的npm首页：Git站点，npm的失效了。用于动态更改界面主题色的 vite 插件。

2.安装

yarn add vite-plugin-theme --dev

3.配置插件

build\vite\plugin\theme.ts：

/**
 * Vite plugin for website theme color switching
 * https://github.com/anncwb/vite-plugin-theme
 */
import { viteThemePlugin, mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme';
import { getThemeColors, generateColors } from '../../config/themeConfig';

export function configThemePlugin() {
  const colors = generateColors({
    mixDarken,
    mixLighten,
    tinycolor,
  });

  const plugin = viteThemePlugin({
    // ↓之前生成的很多个颜色
    colorVariables: [...getThemeColors(), ...colors],
  });
  return plugin;
}

4.配置Vite

build\vite\plugin\index.ts：

// ...
import { configThemePlugin } from './theme';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
  // ...
  //vite-plugin-theme
  vitePlugins.push(configThemePlugin());

  return vitePlugins;
}

5.修改主题方法

之后要修改主题，直接调用一下这个方法即可。

src\logics\theme\index.ts：

import { getThemeColors, ThemeMode, generateColors } from '../../../build/config/themeConfig';

import { replaceStyleVariables } from 'vite-plugin-theme/es/client';
import { mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme/es/colorUtils';

export async function changeTheme(color: string, theme?: ThemeMode) {
  const colors = generateColors({
    mixDarken,
    mixLighten,
    tinycolor,
    color,
  });

  return await replaceStyleVariables({
    colorVariables: [...getThemeColors(color, theme), ...colors],
  });
}

上一章

第五十六章-Vite插件-rollup-plugin-visualizer

下一章

第五十八章-Vite插件-vite-plugin-imagemin