vue一键换皮肤（ant-design-vue 自由切换 暗黑模式dark）
导读：思路 引入 dark.css 文件 动态切换 prefixCls 实现效果...
思路 引入 dark.css 文件 动态切换 prefixCls 实现效果
我们来看看官网怎么说的
官网地址除了 less 定制主题 外 ，我们还提供了 CSS Variable 版本以支持动态切换主题能力 。你可以在 < ConfigProvider 进行体验 。
调用 ConfigProvider 配置方法设置主题色：
import { ConfigProvider } from ant-design-vue; 可以根据你的需求定制主题 ConfigProvider.config({ theme: { primaryColor: #25b864, }, });默认情况下 ，CSS Variable 会以 --ant 作为前缀 。当你的项目中引用多份 css 文件时 ，可以通过修改前缀的方式避免冲突 。
**思路 引入 dark.css 文件 动态切换 Variable 实现效果
编译 less #
由于前缀变更 ，你需要重新生成一份对应的 css 文件 。打包dark.lees 为css
ant-prefix=dark你的自定义名称
运行命令 lessc --js --modify-var=“ant-prefix=dark ” ant-design-vue/dist/antd.dark.less modified.css打包出来的css 都是 .custom-dark- 开头
代码调整通过 ConfigProvider 在顶层修改 prefixCls：
<template> <a-config-provider prefix-cls="custom-dark"> <my-app /> </a-config-provider> </template>mian.js 引入css 文件
// import ant-design-vue/dist/antd.css; import ant-design-vue/dist/antd.variable.min.css // import ant-design-vue/dist/antd.dark.less; // import "ant-design-vue/dist/antd.less" // data-theme="dark" import "@/common/themes/dark.css" // 在app.vue 里面配置 a-config-provider <a-config-provider :component-size="modulesSize" :prefixCls="themes?custom-dark:ant" :locale="locale"> <a-spin :spinning="loading" :delay="500" tip="飞速加载中..."> <router-view :class="themes ?custom-dark:" ></router-view> </a-spin>
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！