diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 00000000..4779894d
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,26 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #1890ff;
+$--color-success: #13ce66;
+$--color-warning: #ffba00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+
+$--border-color-light: #dfe4ed;
+$--border-color-lighter: #e6ebf5;
+
+$--table-border: 1px solid #dfe6ec;
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}
diff --git a/vite.config.ts b/vite.config.ts
index e7c17144..7b53a642 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -35,16 +35,23 @@ export default ({command, mode}: ConfigEnv): UserConfig => {
                     }
                 }
             },
-
             resolve: {
-                // Vite2设置别名路径方式一
+                // Vite 设置别名路径
                 alias: {
                     "@": path.resolve("./src"),  // 相对路径别名配置，@表示src
                 }
+            },
+            // SCSS 变量导出
+            // @see https://www.vitejs.net/config/#css-preprocessoroptions
+            css: {
+                preprocessorOptions: {
+                    scss: {
+                        additionalData:  `@import "./src/styles/element-variables.scss";`,
+                        javascriptEnabled: true
+                    }
+                }
             }
         }
-
-
     )
 }