要将 Element Plus 的主题色设置为红色，您可以按照以下步骤进行操作：

方法一：使用 SCSS 文件全局配置

1. 在项目的 src/styles 目录下创建一个 index.scss 文件（如果没有，请创建相应的目录和文件）。

2. 在 index.scss 文件中添加以下代码：

@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": #FF0000,
    ),
  )
);

@use "element-plus/theme-chalk/src/index.scss" as *;

3. 在 main.js 文件中引入这个 SCSS 文件：

import './styles/index.scss'

方法二：动态设置 CSS 变量

如果您需要动态修改主题色，可以使用以下方法：

1. 创建一个全局方法来设置 CSS 变量：

export const setThemeColor = (color) => {
  document.documentElement.style.setProperty('--el-color-primary', color);
  document.documentElement.style.setProperty('--el-color-primary-light-3', color);
  document.documentElement.style.setProperty('--el-color-primary-light-5', color);
  document.documentElement.style.setProperty('--el-color-primary-light-7', color);
  document.documentElement.style.setProperty('--el-color-primary-light-8', color);
  document.documentElement.style.setProperty('--el-color-primary-light-9', color);
  document.documentElement.style.setProperty('--el-color-primary-dark-2', color);
}

2. 在需要修改主题色的地方调用这个方法：

import { setThemeColor } from './utils/theme'

// 在组件中使用
setThemeColor('#FF0000')

注意事项

• 使用 SCSS 文件配置方法时，确保您的项目已经正确配置了 SCSS 处理器。

• 动态设置 CSS 变量的方法可能会导致首次加载时出现轻微的闪烁，但它提供了更灵活的主题切换能力。

• 如果某些组件的颜色没有随主题色变化，可能需要额外设置相关的 CSS 变量。

• 为了获得更好的视觉效果，您可能需要调整其他相关的颜色变量，如悬停状态的颜色等。