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