javascript - antd dark/light方案?

Question

求ant-design-vue系统实现dark/light主题的切换方案

官网只提供了primary

已用过antd-theme-generator、antd-theme-webpack-plugin，但是报了内存溢出，尝试了很久没有解决

求一个切实可行的方案，最好有demo，感激不尽！！！

Answer 1

vben 实现了，我看 ant design vue 文档，修改组件的 prop 主色就可以，你安装的是 ant-design 的主题色插件吧

https://github.dev/vbenjs/vue-vben-admin/blob/main/README.zh-...

Answer 2

antd 的 dark/light 方案通常需要配合主题切换来实现。一个可行的方法是使用 less-loader 和 less 变量来切换主题。以下是一个基本的步骤和示例：

步骤：

1. 首先，确保你的项目中已经安装了 less 和 less-loader。你可以使用 npm 或 yarn 来安装：

npm install less less-loader --save-dev# 或者yarn add less less-loader --dev

2. 创建一个 less 变量文件来定义你的主题变量。例如，你可以创建一个名为 theme.less 的文件，并在其中定义你的主题颜色和其他样式变量。
3. 在你的主 less 文件中，引入 theme.less 文件，并使用 less 的 darken 和 lighten 函数来调整颜色值以实现暗色和亮色主题。例如：

@import './theme.less';// 定义暗色主题的颜色变量@primary-color-dark: darken(@primary-color, 10%);@link-color-dark: darken(@link-color, 10%);// ... 其他颜色变量// 定义亮色主题的颜色变量@primary-color-light: lighten(@primary-color, 10%);@link-color-light: lighten(@link-color, 10%);// ... 其他颜色变量

4. 在你的 Vue 项目中，使用 vue-loader 和 vue 来动态切换主题。你可以在你的 Vue 组件中添加一个计算属性或方法，根据当前的主题状态来返回相应的样式类名。例如：

<template>  <div :class="themeClass">    <!-- 其他内容 -->  </div></template><script>export default {  data() {    return {      theme: 'dark', // 当前主题状态    };  },  computed: {    themeClass() {      return this.theme === 'dark' ? 'theme-dark' : 'theme-light';    },  },};</script>

5. 在你的 CSS 中，定义 theme-dark 和 theme-light 类名，并为它们分配相应的样式。例如：

.theme-dark {  --primary-color: @primary-color-dark;  --link-color: @link-color-dark;  // ... 其他样式变量}.theme-light {  --primary-color: @primary-color-light;  --link-color: @link-color-light;  // ... 其他样式变量}

6. 最后，在你的 Vue 应用中，根据用户的偏好或其他条件来切换主题状态。例如，你可以监听浏览器的 dark mode 状态变化，或提供切换主题的开关供用户手动设置。在切换主题状态时，更新 theme 数据属性的值即可。