主题设置

开发环境

"@ant-design/icons-vue": "^6.1.0",
"ant-design-vue": "^3.2.10",
"vue": "^3.2.37",
"webpack-theme-color-replacer": "^1.4.1",
@vue/cli-service": "~5.0.8

定制主题

该功能的实现比较容易，直接在 vue.config.js 文件中，通过配置某些变量就可以非常容易的实现定制化的 UI 特性

设置属性

 css: {//....loaderOptions: { //css预设器配置项,向 CSS 相关的 loader 传递选项less: {//less-loader@5 直接配置选项lessOptions: {//定制主题-确定为特定主题 而无法切换主题modifyVars: {//以下变量存在于'primary-color': '#206FE6',//   'error-color':'#e0002a',//   'link-color': '#fafafa',//   'font-size-base': '16px','height-base':'40px','height-lg':'60px','input-bg': '#F5F7FA','calendar-bg': '#F5F7FA','picker-bg': '#F5F7FA','select-background': '#F5F7FA','select-single-item-height-lg':'60px','layout-header-background':'#206FE6','menu-dark-inline-submenu-bg':'transparent',//因为菜单文字需要白色，因此对应主题色选择的是dark'menu-dark-item-active-bg':'#ffffff4d','tabs-card-active-color':'#fff','table-sticky-scroll-bar-bg':'#206FE6','table-header-bg':'#F5F7FA','body-background':'rgba(216, 220, 230, 0.2)','border-radius-base':'5px','btn-height-base':'40px','btn-border-width':'0','btn-border-radius-base': '10px','card-radius': '15px','card-shadow': '7px 4px 12px 0px rgba(122, 138, 153, 0.24)','modal-header-border-color-split':'transparent','modal-footer-border-color-split':'transparent','collapse-header-bg':'transparent','collapse-content-bg':'transparent',},javascriptEnabled: true,},}}}

你可以找到所有可以设置的变量值在你的项目目录:
node_modules/ant-design-vue/dist/default-theme.js

根据组件可选的变量值的目录(应该是打包之前的代码，因此可读性较强)：
node_modules/ant-design-vue/lib/style/themes/variable.less

需要注意，有些变量会影响整个项目，因此如果某些设置是需要全局改变的时候才需要在这里设置，否则最好是在某个 class 具体的范围内进行设置

动态主题

antd 官方提供的方式

ConfigProvider.config({prefixCls,theme: {primaryColor},
})

只能修改 ant 原有 primary-color 的颜色，并且在第一次设置有效，动态修改主题第二次开始就不在生效，除非刷新系统后重新设置

并且该方式需要提前生成对应的不同主题的设置文件，然后全部引入，根据不同的前缀用以区分使用哪个

该方式涉及文件的生成以及动态切换 less 的性能问题，以及以上没有找到有效的解决方案，因此放弃

webpack-theme-color-replacer 方式

该方式引入了 webpack-theme-color-replacer 包

需要注意：

如果项目之前使用了按需引入需要去除

删除 babel.config.js 中 plugins 数组中的

    [// 按需加载js"import",{libraryName: "ant-design-vue", libraryDirectory: "es", style: true}],

在 main.ts 中全局引入样式

import 'ant-design-vue/dist/antd.less';

theme.config.js 初始化主题的配置文件

之所以需要该文件是因为 webpack-theme-color-replacer 主要是针对的是 element-ui 框架实现的动态主题，所以需要对部分内容进行修改以适应 ant-design-vue

const ThemeColorReplacer = require('webpack-theme-color-replacer')
//该文件到自己项目的@ant-design/colors文件夹中找一下，主要是用generate方法const generate = require('@ant-design/colors/dist/index').generate;
//根据主题色获取到对应系列的hover、select 等的颜色
const getAntdSerials = (color) => {// 淡化（即less的tint）const lightens = new Array(9).fill().map((t, i) => {return ThemeColorReplacer.varyColor.lighten(color, i / 10)})const colorPalettes = generate(color)const rgb = ThemeColorReplacer.varyColor.toNum3(color.replace('#', '')).join(',')return lightens.concat(colorPalettes).concat(rgb)
}//该方法就是替换element-ui样式选择器为ant-design-vue样式选择器
const themePluginOption = {fileName: 'css/theme-colors-[contenthash:8].css', // 输出css文件名 支持[contenthash] 与 [hash]matchColors: getAntdSerials('#206fe6'), // 默认显示的主题颜色 修改后重新启动项目生效// 改变样式选择器，解决样式覆盖问题changeSelector (selector) {switch (selector) {case '.ant-calendar-today .ant-calendar-date':return ':not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)' + selectorcase '.ant-btn:focus,.ant-btn:hover':return '.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger)'case '.ant-btn.active,.ant-btn:active':return '.ant-btn.active:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:active:not(.ant-btn-primary):not(.ant-btn-danger)'case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':case '.ant-steps-item-process .ant-steps-item-icon>.ant-steps-icon':return ':not(.ant-steps-item-process)' + selectorcase '.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover':case '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal > .ant-menu-submenu-selected,.ant-menu-horizontal > .ant-menu-submenu:hover':return '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover'case '.ant-menu-horizontal > .ant-menu-item-selected > a':case '.ant-menu-horizontal>.ant-menu-item-selected>a':return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item-selected > a'case '.ant-menu-horizontal > .ant-menu-item > a:hover':case '.ant-menu-horizontal>.ant-menu-item>a:hover':return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item > a:hover'default :return selector}}
}const createThemeColorReplacerPlugin = () => new ThemeColorReplacer(themePluginOption)module.exports = createThemeColorReplacerPlugin

在 vue.config.js 文件中添加


const createThemeColorReplacerPlugin = require("./theme.config");//module.exports的configureWebpack/plugins中
configureWebpack: {plugins: [createThemeColorReplacerPlugin()]
}
//设置变量modifyVars
css: {loaderOptions:{less: { //less-loader@5 直接配置选项lessOptions: { //定制主题-确定为特定主题 而无法切换主题modifyVars: {'primary-color': '#206FE6',}}}}
}

注意这里 primary-color 必须设置一个值表明 primary-color 会被重写，否则不生效。
‘~ant-design-vue/dist/antd.less’多次引用会导致 class 多次被重写,至少引用一次
而’~ant-design-vue/lib/style/index.less’被引用主要是为了使用变量

theme.ts 修改主题的功能文件，可以在点击切换主题时调用 setTheme 方法

import client from "webpack-theme-color-replacer/client";
// import {generate} from "@ant-design/colors";
const generate = require('@ant-design/colors/dist/index').generate;const getAntdSerials = (color) => {// 淡化（即less的tint）const lightens = new Array(9).fill(null).map((t, i) => {return client.varyColor.lighten(color, i / 10);});// colorPalette变换得到颜色值const colorPalettes = generate(color);const rgb = client.varyColor.toNum3(color.replace("#", "")).join(",");return lightens.concat(colorPalettes).concat(rgb);
}
/*** 运行时更改主题颜色* @param newColor 主题色*/
const changeColor = (newColor) => {console.log("changeColor")var options = {newColors:getAntdSerials(newColor), // new colors array, one-to-one corresponde with `matchColors`changeUrl(cssUrl) {console.log(cssUrl)return `/${cssUrl}`; // while router is not `hash` mode, it needs absolute path},};return client.changer.changeColor(options, Promise);
}const setTheme = (newPrimaryColor) => {const hideMessage = () => console.log("正在切换主题！", 0);changeColor(newPrimaryColor).finally((t) => {setTimeout(() => {hideMessage();});});
};
export { setTheme };

[vue] 主题设置相关推荐

免费版Typora设置vue主题
一.下载Typora与主题vue安装包最新版版本的Typora网上开始收取费用,现在低版本的Typora仍然还是免费的,而且并不影响正常使用.下载链接在下方,并提供了vue主题文件. 链接:百度网盘 ...
ggplot2笔记8：主题设置、存储导出
ggplot2绘图基础系列: 1初识ggplot2.基本用法以及如何绘制几何对象 2图层的使用--基础.怎样加标签.注释 3工具箱--误差线.加权数.展示数据分布 4语法基础 5通过图层构建图像 6标 ...
配置linux终端主题需要密码,Mac/Ubuntu下终端色彩主题设置
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 审美是主观的, 但是总有一些东西是大家普遍觉得更"美"的. 我自己由于工作性质和个人爱好两方面的原因 ...
[vue] 怎么解决vue动态设置img的src不生效的问题
[vue] 怎么解决vue动态设置img的src不生效的问题不是应该 require('@/assets/images/xxx.png') 这样吗??你这样多浪费资源啊 @chenqim 个人简介 ...
VS2010主题设置及插件推荐
本文主要写了个人使用 VS2010 的一些配置及实用插件,从而打造一个符合个人风格的开发环境. 基础设置安装 Visual Assist X 在 VS2010 中若不安装 Visual Assist ...
Hexo-fluid主题设置统计博客阅读量
Hexo-fluid主题设置统计博客阅读量开始小插曲: 我使用的是sublime文本编辑器: [官网] https://www.sublimetext.com/ 正戏开始查找关键字:web_an ...
vue :style 设置背景图片 backgroundImage
vue 日常坑 vue :style 设置动态设背景图片 backgroundImage 控制台会报错 404错误,但是不影响页面使用如下: http://localhost:8080/ooooo/ ...
微信气泡主题设置_微信猫和老鼠主题怎么弄？猫和老鼠聊天气泡主题设置教程...
阅读本文前,请您先点击上面的"科技阿",再点击"关注",这样您就可以继续免费收到文章了.每天都会有分享,都是免费订阅,请您放心关注. 注:本文转载自网络,如有 ...
只需2步，教你在Vue中设置登录验证拦截
摘要:两步教你在Vue中设置登录验证拦截! 本文分享自华为云社区<两步教你在Vue中设置登录验证拦截!>,作者: 灰小猿 . 今天在做vue和springboot交互的一个项目的时候,想要 ...

[vue] 主题设置