element-plus-theming

Element Plus Theming

This skill provides comprehensive guidance for customizing Element Plus themes using SCSS variables and CSS variables.

When to Invoke

Invoke this skill when:

• User wants to change the primary theme color
• User needs to customize component styles
• User asks about SCSS variable override
• User wants to use CSS variables for theming
• User needs to create a custom theme

Theming Methods

Element Plus provides two main methods for theme customization:

1. SCSS Variables Override

Best for large-scale theme changes and build-time customization.

Available Variables

Find all SCSS variables in:

• packages/theme-chalk/src/common/var.scss

Key variable categories:

• $colors: Color palette (primary, success, warning, danger, info)
• $font-size: Font sizes
• $border-radius: Border radius values
• $box-shadow: Box shadow styles
• Component-specific variables (e.g., $button, $input, $table)

Override SCSS Variables

Create a custom SCSS file (e.g., styles/element/index.scss):

/* Override what you need */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': green,
    ),
  )
);

/* Import all styles if needed */
/* @use "element-plus/theme-chalk/src/index.scss" as *; */

Important: Use @use instead of @import (Sass team will remove @import eventually).

Import Custom Theme

import { createApp } from 'vue'
import './styles/element/index.scss'
import ElementPlus from 'element-plus'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)

Vite Configuration for On-Demand Import

import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  resolve: {
    alias: {
      '~/': `${path.resolve(__dirname, 'src')}/`,
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/styles/element/index.scss" as *;`,
      },
    },
  },
  plugins: [
    vue(),
    ElementPlus({
      useSource: true,
    }),
  ],
})