ElementPlus Theme Modification

Configuration Steps#

Import ElementPlus as needed in the project

# Choose your preferred package manager

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

npm install -D unplugin-vue-components unplugin-auto-import

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

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

Install dependencies
```
npm install -D sass
```

Create a theme file

// @/style/index.scss
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": #15aabf,
    ),
    "success": (
      "base": #59be00,
    ),
    "warning": (
      "base": #E6A23C,
    ),
    "danger": (
      "base": #fa5252,
    ),
    "error": (
      "base": #fa5252,
    ),
    "info": (
      "base": #c8c6c4,
    ),
  ),
);

Modify the vite configuration file

// vite.config.js
import path from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// Auto import
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({
  resolve: {
    alias: {
      // Configure resource path
      "@/": `${path.resolve(__dirname, "src")}/`,
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        // Custom theme color
        additionalData: `@use "@/style/index.scss" as *;`,
      },
    },
  },
  plugins: [
    vue(),
    // Auto import
    AutoImport({
      resolvers: [
        ElementPlusResolver({
          // Add this line to automatically import and modify the theme color, use preprocessor style, not adding this line will cause the default theme color of ElMessage, ElNotification, and other components to override the custom theme color
          importStyle: "sass",
        }),
      ],
    }),
    Components({
      resolvers: [
        ElementPlusResolver({
          // Add this line to automatically import and modify the theme color, use preprocessor style
          importStyle: "sass",
        }),
      ],
    }),
  ],
});

Import element-plus style file in main.ts
```
import 'element-plus/dist/index.css'
```

Effect#

<template>
  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button round>Round</el-button>
    <el-button type="primary" round>Primary</el-button>
    <el-button type="success" round>Success</el-button>
    <el-button type="info" round>Info</el-button>
    <el-button type="warning" round>Warning</el-button>
    <el-button type="danger" round>Danger</el-button>
  </el-row>

  <div class="mb-4">
    <el-button plain @click="open1"> Success </el-button>
    <el-button plain @click="open2"> Warning </el-button>
    <el-button plain @click="open3"> Info </el-button>
    <el-button plain @click="open4"> Error </el-button>
  </div>
  <el-alert title="success alert" type="success" class="mb-4" />
  <el-alert title="info alert" type="info" class="mb-4" />
  <el-alert title="warning alert" type="warning" class="mb-4" />
  <el-alert title="error alert" type="error" class="mb-4" />
  <el-button @click="dialogVisible = true" class="mb-4">
    Open Dialog
  </el-button>

  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="30%"
    :before-close="handleClose"
  >
    <span>This is a message</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElNotification, ElMessageBox } from "element-plus";
import { ref } from "vue";

const dialogVisible = ref(false);

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};

const open1 = () => {
  ElNotification({
    title: "Success",
    message: "This is a success message",
    type: "success",
  });
};

const open2 = () => {
  ElNotification({
    title: "Warning",
    message: "This is a warning message",
    type: "warning",
  });
};

const open3 = () => {
  ElNotification({
    title: "Info",
    message: "This is an info message",
    type: "info",
  });
};

const open4 = () => {
  ElNotification({
    title: "Error",
    message: "This is an error message",
    type: "error",
  });
};
</script>
<style scoped>
.mb-4 {
  margin-bottom: 16px;
}
</style>