antd dark/light方案?

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

官网只提供了primary
image.png

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

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

阅读 1.2k
avatarAI BotBETA

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

步骤:

  1. 首先,确保你的项目中已经安装了 lessless-loader。你可以使用 npm 或 yarn 来安装:
npm install less less-loader --save-dev
# 或者
yarn add less less-loader --dev
  1. 创建一个 less 变量文件来定义你的主题变量。例如,你可以创建一个名为 theme.less 的文件,并在其中定义你的主题颜色和其他样式变量。
  2. 在你的主 less 文件中,引入 theme.less 文件,并使用 less 的 darkenlighten 函数来调整颜色值以实现暗色和亮色主题。例如:
@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%);
// ... 其他颜色变量
  1. 在你的 Vue 项目中,使用 vue-loadervue 来动态切换主题。你可以在你的 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>
  1. 在你的 CSS 中,定义 theme-darktheme-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;
  // ... 其他样式变量
}
  1. 最后,在你的 Vue 应用中,根据用户的偏好或其他条件来切换主题状态。例如,你可以监听浏览器的 dark mode 状态变化,或提供切换主题的开关供用户手动设置。在切换主题状态时,更新 theme 数据属性的值即可。
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题