vue3/配置Element-Plus主题颜色

1.了解主题颜色

在 Element-Plus 中，主题颜色通常包含以下属性：

1. 主色（Primary Color）：

   • 主色是应用中使用最频繁的颜色，通常用于按钮、链接、图标等，以提供视觉焦点和品牌识别度。

2. 辅助色（Auxiliary Colors）：

   • 辅助色用于支持和补充主色，可以用于不同的组件状态，如成功、警告、错误等。

3. 中性色（Neutral Colors）：

   • 中性色通常用于文本、背景和边框，提供清晰的视觉层次和阅读体验。

4. 边框色（Border Color）：

   • 用于组件边框的颜色，有助于区分组件边界和内部元素。

5. 背景色（Background Color）：

   • 用于整个应用或特定组件背景的颜色，影响整体的视觉感受。

6. 文本色（Text Color）：

   • 用于文本内容的颜色，需要确保在不同背景下的可读性。

7. 禁用色（Disabled Color）：

   • 用于组件在禁用状态下的颜色，以提供视觉反馈。

8. 信息色（Info Color）：

   • 用于信息提示，如信息框、提示信息等。

9. 成功色（Success Color）：

   • 用于表示操作成功的颜色，如成功提示、成功按钮等。

10. 警告色（Warning Color）：

    • 用于警告提示，提醒用户注意的颜色。

11. 错误色（Error Color）：

    用于表示错误状态的颜色，如错误提示、错误按钮等。

在这里有一个推荐的配色网站

https://www.peisebiao.com/

该网站有一些精美的配色方案可以供您参考。

2.安装插件安装scss

在控制台内使用改命令安装scss

npm i sass -D

3.在已经创建好的项目目录下创建文件夹和文件如图。

4.添加配色样式

@forward 'element-plus/theme-chalk/src/common/var.scss' 
with (
    $colors: (
        'primary':(
            //主色
            'base':#27ba9b,
        ),
        'success':(
            //成功色
            'base':#1dc779,
        ),
        'warning':(
            //警告色
            'base':#ffb302,
        ),
        'danger':(
            //主色
            'base':#e26237,
        ),
        'error':(
            //主色
            'base':#cf4444,
        ),
    ),
);

$xtxColor: #27ba9b;
$helpColor:#e26237;
$sucColor:#1dc779;
$warnColor:#ffb302;
$priceColor:#cf4444;

5.进行覆盖ElementPlus样式

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'



// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      //配置elementPlusResolver
      resolvers: [ElementPlusResolver({importStyle:'sass'})],
    }),
  ],
  css: {
    preprocessorOptions: {//导入样式表
      scss: {
        // 全局变量文件
        additionalData: `@use "@/styles/element/index.scss" as *;
        @use "@/styles/var.scss" as *;`,
      }
    }
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})