1 背景

最近在搭建一个后台管理系统时遇到一个在线切换主题的需求，由于项目使用的是vite + Ant-Design-Vue搭建的，在网上找了一圈发现基于webpack的，就很苦恼。好在看到了这位老哥的帖子，他写的这个vite插件很好的解决了这个需求。

原贴传送门：传送门

2 使用

这插件使用其实很简单，楼下再细说。先看看效果图：

2.1 安装

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

yarn

yarn add @zougt/vite-plugin-theme-preprocessor -D

2.2 配置

vite.config.ts

import { defineConfig } from "vite";
import path from "path";
import themePreprocessorPlugin from "@zougt/vite-plugin-theme-preprocessor";export default defineConfig({plugins: [// 引入插件themePreprocessorPlugin({// 使用Lessless: {// 此处配置自己的主题文件multipleScopeVars: [{scopeName: "theme-default",path: path.resolve("src/assets/theme/default.less"),},{scopeName: "theme-dark",path: path.resolve("src/assets/theme/dark.less"),},],defaultScopeName: "theme-default", // 默认取 multipleScopeVars[0].scopeNameextract: false,// 在生产模式是否抽取独立的主题css文件},}),]
});

由于Ant-Design-Vue定制主题需要使用less，所以必须引入Ant-Design-Vue的less文件而不是css文件，具体如何切换为less可以看Ant-Design-Vue的官方文档，此处不多赘述。
配置选项具体可参考插件介绍：插件仓库

2.3 定制主题

自定义主题文件里可通过覆盖Ant-Design-Vue官方主题变量、使用自定义变量、自定义样式等方式实现主题的定制。以下是两种主题的文件示例：

default.less

// 引入官方主题
@import "node_modules/ant-design-vue/lib/style/themes/default";// 修改组件库主题
@primary-color: red;// 自定义变量
@custom-color: #000000;// 自定义全局样式
.login_bg {background: url("@/assets/images/login/bg.jpg") no-repeat 100% 100%;background-size: cover;
}

dark.less

// 引入官方主题
@import "node_modules/ant-design-vue/lib/style/themes/dark";// 修改组件库主题
@primary-color: blue;// 自定义变量
@custom-color: #ffffff;// 自定义全局样式
.login_bg {background: url("@/assets/images/login/bg_daek.jpg") no-repeat 100% 100%;background-size: cover;
}

2.4 切换主题

根据在配置插件时 extract 选项的值，切换主题时的操作有些许不同。

extract: true

const toggleTheme = (scopeName = "theme-default") => {let styleLink = document.getElementById("theme-link-tag");if (styleLink) {// 假如存在id为theme-link-tag 的link标签，直接修改其hrefstyleLink.href = `/${scopeName}.css`;// 注：如果是removeCssScopeName:true移除了主题文件的权重类名，就可以不用修改className 操作document.documentElement.className = scopeName;} else {// 不存在的话，则新建一个styleLink = document.createElement("link");styleLink.type = "text/css";styleLink.rel = "stylesheet";styleLink.id = "theme-link-tag";styleLink.href = `/${scopeName}.css`;// 注：如果是removeCssScopeName:true移除了主题文件的权重类名，就可以不用修改className 操作document.documentElement.className = scopeName;document.head.append(styleLink);}
};

extract: false

const toggleTheme = (scopeName = "theme-default") => {document.documentElement.className = scopeName;
};

在实际项目操作中，强烈建议将当前主题通过 localstorege 或者 cookie 之类的方式缓存至浏览器中，并在用户在关闭浏览器或刷新后重新取出并初始化主题，这样就不会丢失主题影响体验。

也可将本地缓存搭配 Vuex 使用，将切换主题操作放入 actions 中，统一管理主题状态。

3 后记

最后再次感谢 zgt_不梦大佬的插件~

vite + Ant-Design-Vue 实现动态主题切换相关推荐

vue将每个路由打包成html,Ant Design Vue pro 动态路由的实现和打包
Ant Design Vue pro 动态路由的实现和打包 Ant Design Vue pro 动态路由的实现和打包配置路由权限在config文件夹下router.config.js中配置路由权 ...
Ant design vue动态主题切换的坑与一般性方法
本文原创,并且以吐槽为主,下面开始: Ant design vue是很优秀的框架,不过对于一般小白用户(比如我),文档方面不够友好.官方给出了主题自定义色彩的方案,但是太过于简陋,网上很多技术解决方案 ...
vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（2）
回顾上篇文章地址:vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(1)_konsei的博客-CSDN博客上篇文章搭建了vue3项目,引入了ant ...
【Vue3】创建 vite + vue3 + Ant Design Vue 项目
搭建脚手架创建项目: 然后按照它的指示运行项目配置文件安装构建 vue-router: npm i vue-router@next 创建 router/index.js 文件: import { ...
Ant Design Vue 切换中英文改变Menu和内容
前言,目前一个小项目使用的是Ant Design Vue,情况是路由从接口获取并渲染到页面上,切换国际化语言时,Menu 和内容都中英文自动切换. Ant Design Vue 结构 Ant D ...
Ant Design Vue中tabs标签页切换导致页面变宽的问题
问题在使用Ant Design Vue进行开发的时候,使用了tabs标签页,在页里面套用了表格,但是在页面切换后,会发现页面的width会变大差不多2倍,这样会导致页面一些结构的样式发生变化. 解决 ...
基于 Vue3.0 和 Ant Design Vue ,高颜值管理后台UI框架vue-vben-admin运行
简介 Vue Vben Admin 是一个免费开源的中后台模版.使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考. Github地址 ...
Vue vben admin - 新鲜出炉的高颜值管理后台UI框架，基于 Vue3 和 Ant Design Vue
基于Vue3.0 / Vite / Ant Design 等火热开源项目构建,新鲜出炉,值得关注. 关于 Vue vben admin Vue Vben Admin 是一个基于 Vue3.0.Vite ...
ABP vNext 对接 Ant Design Vue 实现分页查询
本文内容 ABP vNext中的分页查询 STable组件中的分页查询实现参数转换层最终对接效果在上一篇博客中,博主和大家分享了如何在 EF Core 中实现多租户架构.在这一过程中,博主主 ...
2019 Electron+Vue+Ant Design Vue仿网易云音乐windows客户端实战分享
特点拖拽播放桌面歌词 mini模式自定义托盘右键菜单任务栏缩略图,歌曲操作音频可视化自动/手动检查更新 Nedb数据库持久化自定义安装路径,安装界面美化浏览器中启动客户端 Travis ...

vite + Ant-Design-Vue 实现动态主题切换