diff --git a/README.md b/README.md
index 1bf1537..1153fd4 100644
--- a/README.md
+++ b/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`
diff --git a/package.json b/package.json
index 5e70f00..ce68692 100644
--- a/package.json
+++ b/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"
   }
diff --git a/playground/app.vue b/playground/app.vue
index 3ab6a08..1be2f20 100644
--- a/playground/app.vue
+++ b/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 />
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index 92ad723..0a2e784 100644
--- a/playground/nuxt.config.ts
+++ b/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'
+        }
+      }
+    }
   }
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4ae505f..7cecc7e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,7 +23,7 @@ importers:
         version: 2.3.1(vue@3.5.12(typescript@5.6.3))
       '@nuxt/module-builder':
         specifier: ^0.5.5
-        version: 0.5.5(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.3)(webpack-sources@3.2.3))(nuxi@3.15.0)(typescript@5.6.3)
+        version: 0.5.5(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.3)(webpack-sources@3.2.3))(nuxi@3.15.0)(sass@1.89.2)(typescript@5.6.3)
       '@nuxt/schema':
         specifier: ^3.13.2
         version: 3.13.2(rollup@4.24.3)(webpack-sources@3.2.3)
@@ -44,7 +44,10 @@ importers:
         version: 3.15.0
       nuxt:
         specifier: ^3.13.2
-        version: 3.13.2(@parcel/watcher@2.4.1)(@types/node@22.8.6)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(terser@5.36.0)(typescript@5.6.3)(vite@5.4.10(@types/node@22.8.6)(terser@5.36.0))(webpack-sources@3.2.3)
+        version: 3.13.2(@parcel/watcher@2.4.1)(@types/node@22.8.6)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(sass@1.89.2)(terser@5.36.0)(typescript@5.6.3)(vite@5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0))(webpack-sources@3.2.3)
+      sass:
+        specifier: ^1.89.2
+        version: 1.89.2
       typescript:
         specifier: ^5.6.3
         version: 5.6.3
@@ -1778,7 +1781,7 @@ packages:
     engines: {node: '>= 14'}
 
   concat-map@0.0.1:
-    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
   confbox@0.1.8:
     resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
@@ -2631,6 +2634,9 @@ packages:
   image-meta@0.2.1:
     resolution: {integrity: sha512-K6acvFaelNxx8wc2VjbIzXKDVB0Khs0QT35U6NkGfTdCmjLNcO2945m7RFNR9/RPVFm48hq7QPzK8uGH18HCGw==}
 
+  immutable@5.1.3:
+    resolution: {integrity: sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==}
+
   import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -2962,6 +2968,7 @@ packages:
 
   lodash.isequal@4.5.0:
     resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
+    deprecated: This package is deprecated. Use require('node:util').isDeepStrictEqual instead.
 
   lodash.memoize@4.1.2:
     resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
@@ -3762,6 +3769,11 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
+  sass@1.89.2:
+    resolution: {integrity: sha512-xCmtksBKd/jdJ9Bt9p7nPKiuqrlBMBuuGkQlkhZjjQk3Ty48lv93k5Dq6OPkKt4XwxDJ7tvlfrTa1MPA9bf+QA==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
   scule@1.3.0:
     resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
 
@@ -5097,12 +5109,12 @@ snapshots:
 
   '@nuxt/devalue@2.0.2': {}
 
-  '@nuxt/devtools-kit@1.6.0(magicast@0.3.5)(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.6)(terser@5.36.0))(webpack-sources@3.2.3)':
+  '@nuxt/devtools-kit@1.6.0(magicast@0.3.5)(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0))(webpack-sources@3.2.3)':
     dependencies:
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.3)(webpack-sources@3.2.3)
       '@nuxt/schema': 3.13.2(rollup@4.24.3)(webpack-sources@3.2.3)
       execa: 7.2.0
-      vite: 5.4.10(@types/node@22.8.6)(terser@5.36.0)
+      vite: 5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0)
     transitivePeerDependencies:
       - magicast
       - rollup
@@ -5122,13 +5134,13 @@ snapshots:
       rc9: 2.1.2
       semver: 7.6.3
 
-  '@nuxt/devtools@1.6.0(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.6)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3)':
+  '@nuxt/devtools@1.6.0(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3)':
     dependencies:
       '@antfu/utils': 0.7.10
-      '@nuxt/devtools-kit': 1.6.0(magicast@0.3.5)(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.6)(terser@5.36.0))(webpack-sources@3.2.3)
+      '@nuxt/devtools-kit': 1.6.0(magicast@0.3.5)(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0))(webpack-sources@3.2.3)
       '@nuxt/devtools-wizard': 1.6.0
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.3)(webpack-sources@3.2.3)
-      '@vue/devtools-core': 7.4.4(vite@5.4.10(@types/node@22.8.6)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
+      '@vue/devtools-core': 7.4.4(vite@5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
       '@vue/devtools-kit': 7.4.4
       birpc: 0.2.19
       consola: 3.2.3
@@ -5157,9 +5169,9 @@ snapshots:
       sirv: 2.0.4
       tinyglobby: 0.2.6
       unimport: 3.13.1(rollup@4.24.3)(webpack-sources@3.2.3)
-      vite: 5.4.10(@types/node@22.8.6)(terser@5.36.0)
-      vite-plugin-inspect: 0.8.7(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.3)(webpack-sources@3.2.3))(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.6)(terser@5.36.0))
-      vite-plugin-vue-inspector: 5.1.3(vite@5.4.10(@types/node@22.8.6)(terser@5.36.0))
+      vite: 5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0)
+      vite-plugin-inspect: 0.8.7(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.3)(webpack-sources@3.2.3))(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0))
+      vite-plugin-vue-inspector: 5.1.3(vite@5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0))
       which: 3.0.1
       ws: 8.18.0
     transitivePeerDependencies:
@@ -5198,7 +5210,7 @@ snapshots:
       - supports-color
       - webpack-sources
 
-  '@nuxt/module-builder@0.5.5(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.3)(webpack-sources@3.2.3))(nuxi@3.15.0)(typescript@5.6.3)':
+  '@nuxt/module-builder@0.5.5(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.3)(webpack-sources@3.2.3))(nuxi@3.15.0)(sass@1.89.2)(typescript@5.6.3)':
     dependencies:
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.3)(webpack-sources@3.2.3)
       citty: 0.1.6
@@ -5206,7 +5218,7 @@ snapshots:
       mlly: 1.7.2
       nuxi: 3.15.0
       pathe: 1.1.2
-      unbuild: 2.0.0(typescript@5.6.3)
+      unbuild: 2.0.0(sass@1.89.2)(typescript@5.6.3)
     transitivePeerDependencies:
       - sass
       - supports-color
@@ -5258,12 +5270,12 @@ snapshots:
       - supports-color
       - webpack-sources
 
-  '@nuxt/vite-builder@3.13.2(@types/node@22.8.6)(eslint@8.57.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(terser@5.36.0)(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3)':
+  '@nuxt/vite-builder@3.13.2(@types/node@22.8.6)(eslint@8.57.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(sass@1.89.2)(terser@5.36.0)(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3)':
     dependencies:
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.3)(webpack-sources@3.2.3)
       '@rollup/plugin-replace': 5.0.7(rollup@4.24.3)
-      '@vitejs/plugin-vue': 5.1.4(vite@5.4.10(@types/node@22.8.6)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
-      '@vitejs/plugin-vue-jsx': 4.0.1(vite@5.4.10(@types/node@22.8.6)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
+      '@vitejs/plugin-vue': 5.1.4(vite@5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
+      '@vitejs/plugin-vue-jsx': 4.0.1(vite@5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
       autoprefixer: 10.4.20(postcss@8.4.47)
       clear: 0.1.0
       consola: 3.2.3
@@ -5289,9 +5301,9 @@ snapshots:
       ufo: 1.5.4
       unenv: 1.10.0
       unplugin: 1.15.0(webpack-sources@3.2.3)
-      vite: 5.4.10(@types/node@22.8.6)(terser@5.36.0)
-      vite-node: 2.1.4(@types/node@22.8.6)(terser@5.36.0)
-      vite-plugin-checker: 0.8.0(eslint@8.57.1)(optionator@0.9.4)(typescript@5.6.3)(vite@5.4.10(@types/node@22.8.6)(terser@5.36.0))
+      vite: 5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0)
+      vite-node: 2.1.4(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0)
+      vite-plugin-checker: 0.8.0(eslint@8.57.1)(optionator@0.9.4)(typescript@5.6.3)(vite@5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0))
       vue: 3.5.12(typescript@5.6.3)
       vue-bundle-renderer: 2.1.1
     transitivePeerDependencies:
@@ -5801,19 +5813,19 @@ snapshots:
       - encoding
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@4.0.1(vite@5.4.10(@types/node@22.8.6)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
+  '@vitejs/plugin-vue-jsx@4.0.1(vite@5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
     dependencies:
       '@babel/core': 7.26.0
       '@babel/plugin-transform-typescript': 7.25.9(@babel/core@7.26.0)
       '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.26.0)
-      vite: 5.4.10(@types/node@22.8.6)(terser@5.36.0)
+      vite: 5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0)
       vue: 3.5.12(typescript@5.6.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.1.4(vite@5.4.10(@types/node@22.8.6)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
+  '@vitejs/plugin-vue@5.1.4(vite@5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
     dependencies:
-      vite: 5.4.10(@types/node@22.8.6)(terser@5.36.0)
+      vite: 5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0)
       vue: 3.5.12(typescript@5.6.3)
 
   '@vue-macros/common@1.15.0(rollup@4.24.3)(vue@3.5.12(typescript@5.6.3))':
@@ -5891,14 +5903,14 @@ snapshots:
 
   '@vue/devtools-api@6.6.4': {}
 
-  '@vue/devtools-core@7.4.4(vite@5.4.10(@types/node@22.8.6)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
+  '@vue/devtools-core@7.4.4(vite@5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
     dependencies:
       '@vue/devtools-kit': 7.4.4
       '@vue/devtools-shared': 7.6.2
       mitt: 3.0.1
       nanoid: 3.3.7
       pathe: 1.1.2
-      vite-hot-client: 0.2.3(vite@5.4.10(@types/node@22.8.6)(terser@5.36.0))
+      vite-hot-client: 0.2.3(vite@5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0))
       vue: 3.5.12(typescript@5.6.3)
     transitivePeerDependencies:
       - vite
@@ -7403,6 +7415,8 @@ snapshots:
 
   image-meta@0.2.1: {}
 
+  immutable@5.1.3: {}
+
   import-fresh@3.3.0:
     dependencies:
       parent-module: 1.0.1
@@ -7812,7 +7826,7 @@ snapshots:
 
   mkdirp@1.0.4: {}
 
-  mkdist@1.6.0(typescript@5.6.3):
+  mkdist@1.6.0(sass@1.89.2)(typescript@5.6.3):
     dependencies:
       autoprefixer: 10.4.20(postcss@8.4.47)
       citty: 0.1.6
@@ -7828,6 +7842,7 @@ snapshots:
       semver: 7.6.3
       tinyglobby: 0.2.10
     optionalDependencies:
+      sass: 1.89.2
       typescript: 5.6.3
 
   mlly@1.7.2:
@@ -8000,14 +8015,14 @@ snapshots:
 
   nuxi@3.15.0: {}
 
-  nuxt@3.13.2(@parcel/watcher@2.4.1)(@types/node@22.8.6)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(terser@5.36.0)(typescript@5.6.3)(vite@5.4.10(@types/node@22.8.6)(terser@5.36.0))(webpack-sources@3.2.3):
+  nuxt@3.13.2(@parcel/watcher@2.4.1)(@types/node@22.8.6)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(sass@1.89.2)(terser@5.36.0)(typescript@5.6.3)(vite@5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0))(webpack-sources@3.2.3):
     dependencies:
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 1.6.0(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.6)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3)
+      '@nuxt/devtools': 1.6.0(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3)
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.3)(webpack-sources@3.2.3)
       '@nuxt/schema': 3.13.2(rollup@4.24.3)(webpack-sources@3.2.3)
       '@nuxt/telemetry': 2.6.0(magicast@0.3.5)(rollup@4.24.3)(webpack-sources@3.2.3)
-      '@nuxt/vite-builder': 3.13.2(@types/node@22.8.6)(eslint@8.57.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(terser@5.36.0)(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3)
+      '@nuxt/vite-builder': 3.13.2(@types/node@22.8.6)(eslint@8.57.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.3)(sass@1.89.2)(terser@5.36.0)(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3)
       '@unhead/dom': 1.11.11
       '@unhead/shared': 1.11.11
       '@unhead/ssr': 1.11.10
@@ -8666,6 +8681,14 @@ snapshots:
   safer-buffer@2.1.2:
     optional: true
 
+  sass@1.89.2:
+    dependencies:
+      chokidar: 4.0.1
+      immutable: 5.1.3
+      source-map-js: 1.2.1
+    optionalDependencies:
+      '@parcel/watcher': 2.4.1
+
   scule@1.3.0: {}
 
   semver@5.7.2: {}
@@ -9026,7 +9049,7 @@ snapshots:
       has-symbols: 1.0.3
       which-boxed-primitive: 1.0.2
 
-  unbuild@2.0.0(typescript@5.6.3):
+  unbuild@2.0.0(sass@1.89.2)(typescript@5.6.3):
     dependencies:
       '@rollup/plugin-alias': 5.1.1(rollup@3.29.5)
       '@rollup/plugin-commonjs': 25.0.8(rollup@3.29.5)
@@ -9043,7 +9066,7 @@ snapshots:
       hookable: 5.5.3
       jiti: 1.21.6
       magic-string: 0.30.12
-      mkdist: 1.6.0(typescript@5.6.3)
+      mkdist: 1.6.0(sass@1.89.2)(typescript@5.6.3)
       mlly: 1.7.2
       pathe: 1.1.2
       pkg-types: 1.2.1
@@ -9207,16 +9230,16 @@ snapshots:
       spdx-correct: 3.2.0
       spdx-expression-parse: 3.0.1
 
-  vite-hot-client@0.2.3(vite@5.4.10(@types/node@22.8.6)(terser@5.36.0)):
+  vite-hot-client@0.2.3(vite@5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0)):
     dependencies:
-      vite: 5.4.10(@types/node@22.8.6)(terser@5.36.0)
+      vite: 5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0)
 
-  vite-node@2.1.4(@types/node@22.8.6)(terser@5.36.0):
+  vite-node@2.1.4(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0):
     dependencies:
       cac: 6.7.14
       debug: 4.3.7(supports-color@9.4.0)
       pathe: 1.1.2
-      vite: 5.4.10(@types/node@22.8.6)(terser@5.36.0)
+      vite: 5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -9228,7 +9251,7 @@ snapshots:
       - supports-color
       - terser
 
-  vite-plugin-checker@0.8.0(eslint@8.57.1)(optionator@0.9.4)(typescript@5.6.3)(vite@5.4.10(@types/node@22.8.6)(terser@5.36.0)):
+  vite-plugin-checker@0.8.0(eslint@8.57.1)(optionator@0.9.4)(typescript@5.6.3)(vite@5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0)):
     dependencies:
       '@babel/code-frame': 7.26.2
       ansi-escapes: 4.3.2
@@ -9240,7 +9263,7 @@ snapshots:
       npm-run-path: 4.0.1
       strip-ansi: 6.0.1
       tiny-invariant: 1.3.3
-      vite: 5.4.10(@types/node@22.8.6)(terser@5.36.0)
+      vite: 5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0)
       vscode-languageclient: 7.0.0
       vscode-languageserver: 7.0.0
       vscode-languageserver-textdocument: 1.0.12
@@ -9250,7 +9273,7 @@ snapshots:
       optionator: 0.9.4
       typescript: 5.6.3
 
-  vite-plugin-inspect@0.8.7(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.3)(webpack-sources@3.2.3))(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.6)(terser@5.36.0)):
+  vite-plugin-inspect@0.8.7(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.3)(webpack-sources@3.2.3))(rollup@4.24.3)(vite@5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.3(rollup@4.24.3)
@@ -9261,14 +9284,14 @@ snapshots:
       perfect-debounce: 1.0.0
       picocolors: 1.1.1
       sirv: 2.0.4
-      vite: 5.4.10(@types/node@22.8.6)(terser@5.36.0)
+      vite: 5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0)
     optionalDependencies:
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.3)(webpack-sources@3.2.3)
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  vite-plugin-vue-inspector@5.1.3(vite@5.4.10(@types/node@22.8.6)(terser@5.36.0)):
+  vite-plugin-vue-inspector@5.1.3(vite@5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0)):
     dependencies:
       '@babel/core': 7.26.0
       '@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.26.0)
@@ -9279,11 +9302,11 @@ snapshots:
       '@vue/compiler-dom': 3.5.12
       kolorist: 1.8.0
       magic-string: 0.30.12
-      vite: 5.4.10(@types/node@22.8.6)(terser@5.36.0)
+      vite: 5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0)
     transitivePeerDependencies:
       - supports-color
 
-  vite@5.4.10(@types/node@22.8.6)(terser@5.36.0):
+  vite@5.4.10(@types/node@22.8.6)(sass@1.89.2)(terser@5.36.0):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.47
@@ -9291,6 +9314,7 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.8.6
       fsevents: 2.3.3
+      sass: 1.89.2
       terser: 5.36.0
 
   vscode-jsonrpc@6.0.0: {}
diff --git a/src/core/index.ts b/src/core/index.ts
index 636421d..c5e8328 100644
--- a/src/core/index.ts
+++ b/src/core/index.ts
@@ -9,5 +9,6 @@ export * from './methods'
 export * from './options'
 export * from './styles'
 export * from './teleports'
+export * from './themeChalk'
 export * from './themes'
 export * from './transformPlugin'
diff --git a/src/core/options.ts b/src/core/options.ts
index cc24383..c80fc5c 100644
--- a/src/core/options.ts
+++ b/src/core/options.ts
@@ -1,8 +1,10 @@
 import { useNuxt } from '@nuxt/kit'
 import { libraryName, optimizeDeps } from '../config'
-import type { ModuleOptions } from '../types'
+import { isFunction } from '../utils'
+import type { ModuleOptions, Themes } from '../types'
 
 export function resolveOptions (config: ModuleOptions) {
+  const { cache, importStyle, namespace, themeChalk } = config
   const nuxt = useNuxt()
 
   nuxt.options.build.transpile.push(libraryName)
@@ -10,10 +12,54 @@ export function resolveOptions (config: ModuleOptions) {
   nuxt.options.vite.optimizeDeps.include ||= []
   nuxt.options.vite.optimizeDeps.include.push(...optimizeDeps)
 
-  if (config.cache) {
+  if (cache) {
     nuxt.options.vite.optimizeDeps.include.push(libraryName)
   } else {
     nuxt.options.vite.optimizeDeps.exclude ||= []
     nuxt.options.vite.optimizeDeps.exclude.push(libraryName)
   }
+
+  nuxt.options.vite.css ||= {}
+  nuxt.options.vite.css.preprocessorOptions ||= {}
+  nuxt.options.vite.css.preprocessorOptions.scss ||= {}
+  nuxt.options.vite.css.preprocessorOptions.scss.api ??= 'modern-compiler'
+  nuxt.options.webpack.loaders.scss.api ??= 'modern-compiler'
+
+  if (importStyle === 'scss' && themeChalk) {
+    const files: Array<'namespace' | 'common' | Themes> = []
+    const keys = Object.keys(themeChalk) as (keyof typeof themeChalk)[]
+    const themes = keys.filter((key) => {
+      return !key.startsWith('$') && themeChalk[key] && Object.keys(themeChalk[key]).length
+    }) as Themes[]
+
+    if (namespace && namespace !== 'el') {
+      files.push('namespace')
+    }
+    if (keys.some(key => key.startsWith('$'))) {
+      files.push('common')
+    }
+    files.push(...themes)
+
+    const additionalData = files.reduce((all, item) => {
+      all += `@use "${nuxt.options.buildDir}/${libraryName}-scss-${item}.scss";`
+      return all
+    }, '')
+
+    async function genAdditionalData (old: string | Function | undefined, source: string, ...arg: unknown[]) {
+      const content = isFunction(old) ? await old(source, ...arg) : (old ?? '') + source
+      return additionalData + content
+    }
+
+    if (additionalData) {
+      const oldVite = nuxt.options.vite.css!.preprocessorOptions!.scss.additionalData
+      nuxt.options.vite.css.preprocessorOptions.scss.additionalData = (source: string, ...arg: unknown[]) => {
+        return genAdditionalData(oldVite, source, ...arg)
+      }
+
+      const oldWebpack = nuxt.options.webpack.loaders.scss.additionalData
+      nuxt.options.webpack.loaders.scss.additionalData = (source: string, ...arg: unknown[]) => {
+        return genAdditionalData(oldWebpack, source, ...arg)
+      }
+    }
+  }
 }
diff --git a/src/core/themeChalk.ts b/src/core/themeChalk.ts
new file mode 100644
index 0000000..2e52aa3
--- /dev/null
+++ b/src/core/themeChalk.ts
@@ -0,0 +1,85 @@
+import type { NuxtTemplate } from '@nuxt/schema'
+import { libraryName } from '../config'
+import { isArray, isObject, resolveComponentPath } from '../utils'
+import type { ModuleOptions, ScssChalk, ScssVariables, Themes } from '../types'
+
+export function resolveThemeChalk (config: ModuleOptions) {
+  const { themeChalk, namespace } = config
+  const files: NuxtTemplate[] = []
+  const common: ScssChalk = {}
+  const themes: Themes[] = []
+
+  if (!themeChalk) { return [] }
+
+  Object.keys(themeChalk).forEach((key) => {
+    if (key.startsWith('$')) {
+      const _key = key as keyof ScssChalk
+      common[_key] = themeChalk[_key]
+    } else {
+      themes.push(key as Themes)
+    }
+  })
+
+  if (namespace && namespace !== 'el') {
+    files.push(genNamespaceFile())
+  }
+
+  if (Object.keys(common).length) {
+    files.push(genThemeChalkFile('common', common))
+  }
+
+  themes.forEach((type) => {
+    const config = themeChalk[type]
+    if (config && Object.keys(config).length) {
+      files.push(genThemeChalkFile(type, config))
+    }
+  })
+
+  function genNamespaceFile () : NuxtTemplate {
+    return {
+      filename: `${libraryName}-scss-namespace.scss`,
+      write: true,
+      getContents: async () => {
+        return `@forward '${await resolveComponentPath('theme-chalk/src/mixins/config.scss', false)}' with (
+  $namespace: '${namespace}'
+);`
+      }
+    }
+  }
+
+  function genThemeChalkFile (type: Themes | 'common', config: ScssChalk): NuxtTemplate {
+    return {
+      filename: `${libraryName}-scss-${type}.scss`,
+      write: true,
+      getContents: async () => {
+        return `@forward '${await resolveComponentPath(`theme-chalk/src/${type}/var.scss`, false)}' with (
+${genScssVariables(config)}
+);`
+      }
+    }
+  }
+
+  function genScssVariables (config: ScssChalk): string {
+    function genValue (value: string | string[] | ScssVariables<string, string | string[] | ScssVariables<string>>): string {
+      if (isArray(value)) {
+        return `(${value.join(', ')})`
+      } else if (isObject(value)) {
+        return `(${Object.entries(value).reduce((all, [k, v]) => {
+          if (!v) { return all }
+          all.push(`'${k}': ${genValue(v)}`)
+          return all
+        }, [] as string[]).join(', ')})`
+      } else {
+        return value
+      }
+    }
+
+    return Object.entries(config).reduce((all, [key, value]) => {
+      if (!value) { return all }
+      all.push(`  ${key}: ${genValue(value)}`)
+      return all
+    }, [] as string[]).join(',\n')
+  }
+
+  return files
+}
diff --git a/src/module.ts b/src/module.ts
index 1dab850..b658bb0 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -11,6 +11,7 @@ import {
   resolveOptions,
   resolveStyles,
   resolveTeleports,
+  resolveThemeChalk,
   resolveThemes,
   resolveMethods,
   transformPlugin,
@@ -44,6 +45,7 @@ export default defineNuxtModule<ModuleOptions>({
     nuxt.options.components !== false && resolveComponents(options)
     options.cache && addTemplate(resolveCache(options))
     options.globalConfig && addPluginTemplate(resolveGlobalConfig(options))
+    options.importStyle === 'scss' && options.themeChalk && resolveThemeChalk(options).map(addTemplate)
 
     if (nuxt.options.ssr !== false) {
       addPluginTemplate(resolveInjection(options))
diff --git a/src/types.ts b/src/types.ts
index 1de0e4a..da82442 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,5 +1,7 @@
 import type { ElIdInjectionContext, ElZIndexInjectionContext, ConfigProviderContext } from 'element-plus'
 
+export type Themes = 'dark'
+
 /** name: export name from the library, as: the name you want to use in your project, from: the name of library */
 export type PresetComponent = string | [name: string, as?: string, from?: string]
 
@@ -15,6 +17,27 @@ export interface TransformOptions {
   exclude: RegExp[]
 }
 
+export type ScssVariables<Key extends string, Value = string> = { [k in Key]?: Value } & { [k: string]: Value }
+
+export interface ScssChalk {
+  '$colors'?: Partial<Record<'success' | 'warning' | 'danger' | 'error' | 'info', { base?: string }>> & ScssVariables<'white' | 'black', string | { base?: string }>
+  '$text-color'?: ScssVariables<'primary' | 'regular' | 'secondary' | 'placeholder' | 'disabled'>
+  '$bg-color'?: ScssVariables<'' | 'page' | 'overlay'>
+  '$border-color'?: ScssVariables<'' | 'light' | 'lighter' | 'extra-light' | 'dark' | 'darker'>
+  '$fill-color'?: ScssVariables<'' | 'light' | 'lighter' | 'extra-light' | 'dark' | 'darker' | 'blank'>
+  '$border-radius'?: ScssVariables<'base' | 'small' | 'round' | 'circle'>
+  '$box-shadow'?: ScssVariables<'' | 'light' | 'lighter' | 'dark', string | string[]>
+  '$font-family'?: ScssVariables<''>
+  '$font-size'?: ScssVariables<'extra-large' | 'large' | 'medium' | 'base' | 'small' | 'extra-small'>
+  '$z-index'?: ScssVariables<'normal' | 'top' | 'popper'>
+  '$common-component-size'?: ScssVariables<'large' | 'default' | 'small'>
+  '$overlay-color'?: ScssVariables<'' | 'light' | 'lighter'>
+  '$mask-color'?: ScssVariables<'' | 'extra-light'>
+  [key: `$${string}`]: string | undefined | ScssVariables<string, string | string[] | ScssVariables<string>>
+}
+
+export type ThemeChalk = ScssChalk & Partial<Record<Themes, ScssChalk>>
+
 export interface ModuleOptions extends TransformOptions {
   /**
    * A list of components that need to be automatically imported externally.
@@ -86,7 +109,7 @@ export interface ModuleOptions extends TransformOptions {
    */
   baseImports: PresetImport[]
   /**
-   * import style css or sass(scss) with components
+   * import style css or scss with components
    *
    * @default 'css'
    *
@@ -103,7 +126,7 @@ export interface ModuleOptions extends TransformOptions {
    *  ['dark']
    * ```
    */
-  themes: Array<'dark'>
+  themes: Themes[]
   /**
    * A list of component names that have no styles, so resolving their styles file should be prevented
    *
@@ -190,4 +213,8 @@ export interface ModuleOptions extends TransformOptions {
    * @default 'false'
    */
   cache?: boolean
+  /**
+   * Configure SCSS variables for generating custom themes. **Only effective when `importStyle` is `scss`**.
+   */
+  themeChalk?: ThemeChalk
 }
diff --git a/src/utils.ts b/src/utils.ts
index e25c2fc..fbe98a8 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -30,6 +30,14 @@ export function getLayersDir (layers: NuxtConfigLayer[]) {
   return list
 }
 
+export function isObject (value: any): value is Record<string, any> {
+  return typeof value === 'object' && value !== null && !isArray(value)
+}
+
+export function isFunction (value: any): value is Function {
+  return typeof value === 'function'
+}
+
 export function isArray (value: any): value is any[] {
   return Array.isArray(value)
 }