ant-design-vue一键换肤

米兰大铁匠
393 阅读3分钟

ant-design-vue版本： 3.2.20

最近项目来了个新需求，老板要求添加换肤功能，先预置三套，后续会继续添加更多预置。

于是，着手调研项目相关方案，看着看着发现项目用的UI框架是ant-design-vue，心想着这框架似乎是自带动态更换主题功能的吧，去官网溜达了一下发现确实可以，于是跟老板确认好功能之后准备开撸，下手之前习惯性的对了下版本，突然发现了不对劲：项目的UI框架版本跟官网的不一致，而且是大版本不一致，项目中用的是3.X版本，而官网已经更新到了4.X，这就尴尬了。

于是，切到3.X版本找了下主题切换方案，万幸，虽然繁琐了一些，但仍然是支持的。只是有些细节需要规避一下，另外，官网上的描述还不够细致，不够全面。

接下来，废话不多说，给出我这边的方案，仅供大家参考。

CSS变量

这是个比较好用的css功能：MDN详细介绍

首先，使用css变量预置3套主题色，直接上代码：

:root {
   --background-color: #FFFFFF;  
  --text-color: #000000;  
  --button-color: #1890ff;  
  --menu-hover-color: #ADD8E6; 
}
//蓝色海洋
:root[theme-mode='blue'] {  
  --background-color: #F0F4FA;  
  --text-color: #333333;  
  --button-color: #007BFF;  
  --menu-hover-color: #ADD8E6;  
}
//绿色森林
:root[theme-mode='green'] {  
  --background-color: #F5F9F6;  
  --text-color: #333333;  
  --button-color: #28A745;  
  --menu-hover-color: #DCEAF8;  
}
//橙色活力
:root[theme-mode='orange'] {  
  --background-color: #FFF5F0;  
  --text-color: #333333;  
  --button-color: #FF7F50;  
  --menu-hover-color: #FFB78D;  
}

注意，这份css代码是可以直接写在less或scss文件中的，因为less与scss支持css变量。另外，这份css/less/scss代码需要在main.js中引入，从而让它在全局生效。 但是，仅有这个是不够的，因为我们不仅要修改自定义元素的主题色，同时需要修改UI框架的默认主题色。接着看

ant-design-vue换肤方案

官网给出的方案：

image.png

详情可以过去仔细瞅瞅：ant-design-vue动态主题

APP.vue的修改：

<template> 
    <a-config-provider prefix-cls="custom">
        <my-app />
    </a-config-provider>
</template>

官网的这段介绍挺简单明了，但是也存在一点问题，也是我在别的博主写的文章里面发现的困惑，就是这段编译less的命令执行不成功。我相信大部分同学是已经全局安装了less的，所以不成功的原因大概率就是在项目的根目录下执行时找不到less文件的位置，这里需要修改命令中文件位置，修改为：

lessc --js --modify-var="ant-prefix=custom" node_modules/ant-design-vue/dist/antd.variable.less modified.css

这样，就可以在项目的根目录下生成一个带全局自定义前缀的css文件modified.css。

以上准备工作完成之后，只需要再完成剩下的切换主题相关操作了。

切换操作

这里不做赘述，还是直接上代码：

import { ConfigProvider } from 'ant-design-vue';

handleTheme() {
    //修改根元素上的自定义属性theme-mode的属性值，每一个属性值有一套对应的主题色
    document.documentElement.setAttribute('theme-mode', ‘blue’)；
    //修改UI框架的默认主题色
    ConfigProvider.config({
        prefixCls: 'custom', theme: { primaryColor: 你的主题色, },
    });
}

至此，功能已基本完成，剩下的需要做的就是在切换主题色时候把你想要改变颜色的地方，使用css变量。 整体比较简单，但是也有一些小坑，网上目前的现有方案多数都是需要webpack插件，或者版本较新，直接使用ant-design-vue 4.x版本自带主题切换的方案。所以出一篇补充的，希望能帮到有需要的人。

avatar
文章
阅读
粉丝