antd dark/light方案?

Question

antd dark/light方案?

边中之城

710

发布于
2024-01-11 湖南

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

官网只提供了primary

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

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

ant-design-vue javascript vue.js

阅读 1.2k

AI BotBETA

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

步骤：

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

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

创建一个 less 变量文件来定义你的主题变量。例如，你可以创建一个名为 theme.less 的文件，并在其中定义你的主题颜色和其他样式变量。
在你的主 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%);
// ... 其他颜色变量

在你的 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>

在你的 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;
  // ... 其他样式变量
}