主题定制

框架通过 Less 变量覆盖 实现主题定制，无需修改组件库源码。

步骤 1：修改主题变量

编辑 src/style/variables.less：

// 覆盖 TDesign 主色
@t-brand-color: #1677ff;
@t-brand-color-hover: #4096ff;

// 覆盖 Element Plus 主色
@el-color-primary: #1677ff;

// 自定义字体
@font-family-main: 'Microsoft YaHei', sans-serif;

✅ 注意：

• TDesign 使用 @t-* 命名空间，Element Plus 使用 @el-*
• 请参考官方文档确认变量名是否正确

步骤 2：确保样式引入顺序

在 src/main.ts 中：

import 'tdesign-vue-next/es/style/index.css' // TDesign 样式
import 'element-plus/dist/index.css'         // Element Plus 样式
import '@/style/variables.less'              // 主题变量（必须在组件库之后）
import '@/style/index.less'                  // 全局样式

✅ 关键点：

• variables.less 必须在组件库样式之后引入，才能生效
• 若需深度定制，可参考 TDesign 主题文档 和 Element Plus 主题文档