动态主题,主要是在在系统中切换主题,实现页面主题色变化

暗黑主题,简单理解就是夜间模式。

灰色主题,有颜色的地方一切置灰

色弱主题,通过设置css,达到页面颜色饱和度的变化

灰色模式

.html-grey { filter: grayscale(100%); }

色弱模式

.html-weakness { filter: invert(80%); }

定制主题

可以从官网中找到antdv.com/docs/vue/cu…

代码调整 

通过 ConfigProvider 在顶层修改 prefixCls：

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

通过静态方法设置主题色以及对应 prefixCls：

import { ConfigProvider } from 'ant-design-vue';
ConfigProvider.config({
  prefixCls: 'custom',
  theme: {
    primaryColor: "#25b864"
  },
});

编译 less

由于前缀变更，你需要重新生成一份对应的 css 文件。

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

然后就可以更换主题色了

黑暗主题

需要把dark.less的Layer background开始以下复制到variable.less末尾，然后再使用 lessc --js --modify-var="ant-prefix=custom-dark" antd.variable.less modified.css 生成一个黑暗主题css文件

最后就完成暗黑主题了。