ant-design-vue 自由切换 暗黑模式dark(ant-design-vue pro)

ant-design-vue 自由切换 暗黑模式dark ant-design-vue 自由切换 暗黑模式dark

推荐整理分享ant-design-vue 自由切换 暗黑模式dark(ant-design-vue pro)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:ant design vue tabs,ant design vue3,ant design vue3,ant design vue3,ant vue design,ant vue design,ant-design-vue pro,ant-design-vue pro,内容如对您有帮助，希望把文章链接给更多的朋友！

项目演示代码

思路 引入 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>