从零开始：如何为 Ant Design Vue 定制主题

2024-02-12 16:13:31

前言

Ant Design Vue 是一个用于构建优雅用户界面的 Vue.js UI 库。它提供了丰富的组件、样式和功能，帮助开发者快速构建现代化的 Web 应用程序。然而，有时您可能需要对 Ant Design Vue 的默认样式进行调整，以更好地匹配您的品牌或应用程序的特定需求。这就是定制主题的用武之地。

安装

首先，您需要安装必要的依赖项：

npm install less less-loader style-resources-loader

创建主题

接下来，您需要在项目中创建一个名为 color.js 的文件，并在其中定义您的主题变量。例如：

module.exports = {
  'primary-color': '#4299E1',
  'link-color': '#4299E1',
  'success-color': '#52C41A',
  'warning-color': '#FAAD14',
  'error-color': '#F5222D',
  'text-color': '#333333',
  'font-size-base': '14px',
  'border-radius-base': '4px',
  'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)'
};

请根据您的喜好和需求调整这些变量的值。

覆盖样式

现在，您需要创建一个 Less 文件来覆盖 Ant Design Vue 的默认样式。例如，您可以创建一个名为 styles.less 的文件，并在其中编写以下代码：

@import '~ant-design-vue/dist/antd.less';

// 覆盖组件的样式
.ant-btn {
  background-color: @primary-color;
  border-color: @primary-color;
}

请根据您的需要继续添加其他样式覆盖。

使用定制主题

在组件中使用定制主题，您需要在组件的 style 选项中指定主题文件路径。例如：

<template>
  <div>
    <Button type="primary">按钮</Button>
  </div>
</template>

<script>
import Button from 'ant-design-vue/lib/button';

export default {
  components: {
    Button
  },
  style: {
    resources: [
      './styles.less'
    ]
  }
};
</script>

动态主题切换

如果您需要在白天和黑夜模式之间动态切换主题，您可以使用 Vuex 来管理主题状态。在您的 Vuex 存储中，您可以定义一个名为 theme 的状态，并根据用户的喜好设置其值为 light 或 dark。然后，您可以在组件中使用 computed 属性来获取当前的主题，并根据主题值动态加载不同的样式文件。