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

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

项目演示

代码

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