ElementPlusのテーマを変更する

配置手順#

プロジェクトに応じて ElementPlus をインポート

# 好きなパッケージマネージャーを選択

# 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()],
    }),
  ],
})

依存関係をインストール
```
npm install -D sass
```

テーマファイルを新規作成

// @/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,
    ),
  ),
);

vite 設定ファイルを変更

// vite.config.js
import path from "path";
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({
  resolve: {
    alias: {
      // リソースパスを設定
      "@/": `${path.resolve(__dirname, "src")}/`,
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        // カスタムテーマカラー
        additionalData: `@use "@/style/index.scss" as *;`,
      },
    },
  },
  plugins: [
    vue(),
    // 自動インポート
    AutoImport({
      resolvers: [
        ElementPlusResolver({
          // 自動インポートでテーマカラーを変更するためにこの行を追加、プリプロセッサスタイルを使用しないとElMessage、ElNotificationなどのコンポーネントでデフォルトのテーマカラーがカスタムテーマカラーを上書きします
          importStyle: "sass",
        }),
      ],
    }),
    Components({
      resolvers: [
        ElementPlusResolver({
          // 自動インポートでテーマカラーを変更するためにこの行を追加、プリプロセッサスタイルを使用
          importStyle: "sass",
        }),
      ],
    }),
  ],
});

main.tsでelement-plusスタイルファイルをインポート
```
import 'element-plus/dist/index.css'
```

効果#

<template>
  <el-row class="mb-4">
    <el-button>デフォルト</el-button>
    <el-button type="primary">プライマリ</el-button>
    <el-button type="success">成功</el-button>
    <el-button type="info">情報</el-button>
    <el-button type="warning">警告</el-button>
    <el-button type="danger">危険</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button plain>プレーン</el-button>
    <el-button type="primary" plain>プライマリ</el-button>
    <el-button type="success" plain>成功</el-button>
    <el-button type="info" plain>情報</el-button>
    <el-button type="warning" plain>警告</el-button>
    <el-button type="danger" plain>危険</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button round>ラウンド</el-button>
    <el-button type="primary" round>プライマリ</el-button>
    <el-button type="success" round>成功</el-button>
    <el-button type="info" round>情報</el-button>
    <el-button type="warning" round>警告</el-button>
    <el-button type="danger" round>危険</el-button>
  </el-row>

  <div class="mb-4">
    <el-button plain @click="open1"> 成功 </el-button>
    <el-button plain @click="open2"> 警告 </el-button>
    <el-button plain @click="open3"> 情報 </el-button>
    <el-button plain @click="open4"> エラー </el-button>
  </div>
  <el-alert title="成功アラート" type="success" class="mb-4" />
  <el-alert title="情報アラート" type="info" class="mb-4" />
  <el-alert title="警告アラート" type="warning" class="mb-4" />
  <el-alert title="エラーアラート" type="error" class="mb-4" />
  <el-button @click="dialogVisible = true" class="mb-4">
    ダイアログを開く
  </el-button>

  <el-dialog
    v-model="dialogVisible"
    title="ヒント"
    width="30%"
    :before-close="handleClose"
  >
    <span>これはメッセージです</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">キャンセル</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          確認
        </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("このダイアログを閉じてもよろしいですか？")
    .then(() => {
      done();
    })
    .catch(() => {
      // エラーをキャッチ
    });
};

const open1 = () => {
  ElNotification({
    title: "成功",
    message: "これは成功メッセージです",
    type: "success",
  });
};

const open2 = () => {
  ElNotification({
    title: "警告",
    message: "これは警告メッセージです",
    type: "warning",
  });
};

const open3 = () => {
  ElNotification({
    title: "情報",
    message: "これは情報メッセージです",
    type: "info",
  });
};

const open4 = () => {
  ElNotification({
    title: "エラー",
    message: "これはエラーメッセージです",
    type: "error",
  });
};
</script>
<style scoped>
.mb-4 {
  margin-bottom: 16px;
}
</style>