非你网

多主题，是一个站点的常规配置。至少白天主题和夜晚主题是必须要有的。 element-plus 提供了一个很好的实现多主题的方案。先从修改默认主题色开始。

https://element-plus.org/zh-CN/guide/theming.html

开始

先安装 sass

pnpm add -D sass

再创建覆盖默认主题颜色的 sass 文件

# 创建
touch assets/styles/element.scss

# 填充以下内容
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #003261,
    ),
    'success': (
      'base': #21ba45,
    ),
    'warning': (
      'base': #f2711c,
    ),
    'danger': (
      'base': #db2828,
    ),
    'error': (
      'base': #db2828,
    ),
    'info': (
      'base': #42b8dd,
    ),
  ),
  $button-padding-horizontal: (
    'default': 80px,
  )
);

最后，在 vite.config.ts 中配置进去。使用 scss.additionalData 来编译所有应用 scss 变量的组件。

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({
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/styles/element.scss" as *;`,
      },
    },
  },
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver(
        importStyle: "sass",
        directives: true
      )],
    }),
    Components({
      resolvers: [
        ElementPlusResolver({
          importStyle: "sass",
          directives: true
        })
      ],
    }),
  ]
})

主要增加了 css 配置和加入了 ElementPlusResolver 的 options。 可以点进去查看具体的参数 ElementPlusResolver 。

在 homeview 中增加一些代码，看看效果

修改 homeview 的代码。

<template>
  <div class="container">
    <h1>Custom theme example (on demand)</h1>

    <el-row>
      <el-button @click="onClick">Default</el-button>
      <el-button type="primary" @click="onClick">Primary</el-button>
      <el-button type="success" @click="onClick">Success</el-button>
      <el-button type="info" @click="onClick">Info</el-button>
      <el-button type="warning" @click="onClick">Warning</el-button>
      <el-button type="danger" @click="onClick">Danger</el-button>
    </el-row>

    <el-radio-group v-model="radioVal">
      <el-radio-button label="New York" />
      <el-radio-button label="Washington" />
      <el-radio-button label="Los Angeles" />
      <el-radio-button label="Chicago" />
    </el-radio-group>

    <div>
      <el-switch v-model="switchVal" /> 
      <el-switch
        v-model="switchVal"
        active-color="#13ce66"
        inactive-color="#ff4949"
      />
    </div>

    <div>
      <el-select>
        <el-option value="test">test</el-option>
      </el-select>
       
      <el-date-picker />
    </div>

    <el-slider v-model="sliderVal" />

    <p>
      It is a example built by vite.  More info see
      <a
        href="https://github.com/element-plus/unplugin-element-plus"
        target="_blank"
        >unplugin-element-plus</a
      >.
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const radioVal = ref('New York')
const switchVal = ref(true)
const sliderVal = ref(50)

function onClick() {
  ElNotification({
     type: 'success',
     title: '已成功发送邮件',
     message: '验证码区分大小写，有效期5分钟',
     duration: 3000,
  })
}
</script>

<style>
.container {
  text-align: center;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  min-height: 90vh;
}

a {
  color: var(--el-color-primary);
  text-decoration: none;
}
</style>

组件大小还是设置成默认好，设置成 mini 还是太小了。将 el-config-provider 中的 size 设置成 default。 再运行看看效果。

看到默认的 primary 蓝色已经被替换掉了。这是 assets/styles/element.scss 中配置的值。其他几个颜色也是。

其实。到目前为止。自动导入，组件默认语言配置，主题配置算是经历过了。这次的主题配置就改了两个地方。第一个是创建 scss 文件，配置覆盖的对应色。另外一个就是在 vite.config.ts 中进行了配置。

还有，按需导入的配置。随着使用组件的增加。 auto-imports.d.ts 和 components.d.ts 会自动的引入。

提交下代码

git add .
git commit -m '安装 sass 并创建使用主题色'