feat: support config the scss variables

README.md

@@ -121,6 +121,27 @@ Whether to cache the element-plus components and directives. **Only effective in
 
 If you enable this feature, you will get faster loading speed in development mode.
 
+### themeChalk
+
+- Type: `object`
+
+Configure SCSS variables for generating custom themes. **Only effective when `importStyle` is `scss`**.
+
+e.g.
+
+```ts
+{
+  $colors: {
+    primary: { base: 'rgba(107,33,168, 1)' }
+  },
+  dark: {
+    $colors: {
+      primary: { base: 'rgb(242, 216, 22)' }
+    }
+  }
+}
+```
+
 ### globalConfig
 
 - Type: `object`

package.json

@@ -56,6 +56,7 @@
     "eslint": "^8.57.1",
     "nuxi": "^3.15.0",
     "nuxt": "^3.13.2",
+    "sass": "^1.89.2",
     "typescript": "^5.6.3",
     "vue": "^3.5.12"
   }

playground/app.vue

@@ -43,7 +43,7 @@ function changeTheme () {
 </script>
 
 <template>
-  <el-config-provider>
+  <el-config-provider namespace="ep">
     <el-container>
       <el-header>
         <header-menu />

playground/nuxt.config.ts

@@ -6,12 +6,33 @@ export default defineNuxtConfig({
   compatibilityDate: '2024-07-05',
   modules: [ElementPlus],
   elementPlus: {
+    cache: true,
+    importStyle: 'scss',
     defaultLocale: 'zh-cn',
     imports: [
       ['useLocale', 'es/hooks/use-locale/index.mjs']
     ],
     themes: ['dark'],
+    namespace: 'ep',
     injectionID: { prefix: 100, current: 1 },
-    globalConfig: { size: 'small', zIndex: 1000 }
+    globalConfig: { size: 'small', zIndex: 1000, namespace: 'ep' },
+    themeChalk: {
+      $colors: {
+        primary: { base: 'rgba(107,33,168, 1)' },
+        success: { base: 'green' },
+        warning: { base: '#f9a23c' },
+        danger: { base: '#ff3300' },
+        error: { base: '#f56c6c' }
+      },
+      dark: {
+        $colors: {
+          primary: { base: 'rgb(242, 216, 22)' }
+        },
+        '$bg-color': {
+          page: '#0a0a0a',
+          overlay: '#1d1e1f'
+        }
+      }
+    }
   }
 })