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>