Vue + Element Plus主题色（默认颜色）定制和黑暗模式切换

1.定制主题颜色（默认颜色）

1.先安装 sass 和 scss

# npm 方法安装

npm i sass

npm i scss

2.在 src 创建目录下创建如下文件及文件夹：/src/styles/element/index.scss

3.在 index.scss 文件中设置默认颜色

@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':red,
        ),
    )
)

4.在 vite.config.ts 中让设置好的颜色覆盖element原有的默认颜色

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      // 在括号里加了{ importStyle: "sass" }
      resolvers: [ElementPlusResolver({ importStyle: "sass" })],
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  // 覆盖颜色
  css: {
    preprocessorOptions: {
      scss: {
        // 这里的路径要和刚刚写的 index.scss 文件路径一致
        additionalData: `
          @use "@/styles/element/index.scss" as *;
        `,
      },
    },
  },
});

5.在页面引入一些按钮，查看效果

<template>
  <div>
    <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>
  </div>
</template>

2.光明与黑暗模式切换

1.新建一个 .css 或 .scss 文件（按个人喜好），写暗黑模式代码

# dark.css

/* 黑暗模式 */
.dark-mode {
  background-color: #1f1f1f;
  /* background-color: #F53181; */
  color: #fff;

  .el-button {
    background-color: #333;
    color: #fff;
  }
  .el-input {
    background-color: #333;
    color: #fff;
  }
}

2.全局引入刚刚创建的样式文件

import '@/assets/dark.css'

3.在页面中写一个切换按钮,控制模式切换

# html部分

<div>
    <el-switch @click="switch()" v-model="value1" />
</div>

# js部分

import {
  ref
} from 'vue'

const value1 = ref(true)
const isDarkMode = ref(false)
const switch = () => {
  isDarkMode.value = !isDarkMode.value
  // 写黑暗模式样式代码的类名
  document.body.classList.toggle('dark-mode')
}

光明与黑暗模式对比

 

完成，欢迎学习和交流！