diff --git a/config/plugin.config.ts b/config/plugin.config.ts
index d62068e6e103b8cd36cd61f2519d9e8ba9a10f57..4ba5a55e9b3b6fc9237ba371ca864ee35bf5373d 100644
--- a/config/plugin.config.ts
+++ b/config/plugin.config.ts
@@ -32,7 +32,7 @@ export default (config: any) => {
   ) {
     config.plugin('webpack-theme-color-replacer').use(ThemeColorReplacer, [
       {
-        fileName: 'css/theme-colors.css',
+        fileName: 'css/theme-colors-[contenthash:8].css',
         matchColors: getAntdSerials('#1890ff'), // 主色系列
         // 改变样式选择器，解决样式覆盖问题
         changeSelector(selector: string): string {
@@ -47,6 +47,7 @@ export default (config: any) => {
               return selector;
           }
         },
+        // isJsUgly: true,
       },
     ]);
   }
diff --git a/package.json b/package.json
index d96aab83d7f8ea59462b048a84bd92e9ae53bddc..b0ae09ec5ed984ec35e6afec3d11ed898afe3b8f 100644
--- a/package.json
+++ b/package.json
@@ -120,7 +120,7 @@
     "umi-plugin-ga": "^1.1.3",
     "umi-plugin-pro": "^1.0.2",
     "umi-types": "^0.3.8",
-    "webpack-theme-color-replacer": "^1.1.5"
+    "webpack-theme-color-replacer": "^1.2.15"
   },
   "optionalDependencies": {
     "puppeteer": "^1.17.0"
@@ -163,4 +163,4 @@
       "create-umi"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/SettingDrawer/themeColorClient.ts b/src/components/SettingDrawer/themeColorClient.ts
index 355a99ae13603321bfc750a7853774c55a4cf7f6..d663e3bf8ac46a9d97e2cca912750dab5aed2453 100644
--- a/src/components/SettingDrawer/themeColorClient.ts
+++ b/src/components/SettingDrawer/themeColorClient.ts
@@ -4,26 +4,27 @@ import client from 'webpack-theme-color-replacer/client';
 import generate from '@ant-design/colors/lib/generate';
 
 export default {
-  lastColor: '#1890ff',
-  primaryColor: '#1890ff',
-  getAntdSerials(color: string) {
+  getAntdSerials(color: string): string[] {
+    const lightCount = 9;
+    const divide = 10;
     // 淡化（即less的tint）
-    const lightens = new Array(9).fill(0).map((_, i) => client.varyColor.lighten(color, i / 10));
+    let lightens = new Array(lightCount).fill(0);
+    lightens = lightens.map((_, i) => client.varyColor.lighten(color, i / divide));
     const colorPalettes = generate(color);
     return lightens.concat(colorPalettes);
   },
-  changeColor(newColor?: string) {
-    const lastColor = this.lastColor || this.primaryColor;
+  changeColor(color?: string): Promise<void> {
+    if (!color) {
+      return Promise.resolve();
+    }
     const options = {
-      // hash模式下用相对路径
-      cssUrl: '/css/theme-colors.css',
-      // current colors array. The same as `matchColors`
-      oldColors: this.getAntdSerials(lastColor),
-      // new colors array, one-to-one corresponde with `oldColors`
-      newColors: this.getAntdSerials(newColor || this.primaryColor),
+      // new colors array, one-to-one corresponde with `matchColors`
+      newColors: this.getAntdSerials(color),
+      changeUrl(cssUrl: string): string {
+        // while router is not `hash` mode, it needs absolute path
+        return `/${cssUrl}`;
+      },
     };
-    const promise = client.changer.changeColor(options, Promise);
-    this.lastColor = lastColor;
-    return promise;
+    return client.changer.changeColor(options, Promise);
   },
 };
diff --git a/src/models/setting.ts b/src/models/setting.ts
index 15beb48e1c3b5a06b548cb7c32811a949920111c..2e52eb54f11cbee5efde3a6ecafae3532b78c570 100644
--- a/src/models/setting.ts
+++ b/src/models/setting.ts
@@ -15,9 +15,11 @@ export interface SettingModelType {
 }
 
 const updateTheme = (newPrimaryColor?: string) => {
-  const timeOut = 0;
-  const hideMessage = message.loading('正在切换主题！', timeOut);
-  themeColorClient.changeColor(newPrimaryColor).finally(() => hideMessage());
+  if (newPrimaryColor) {
+    const timeOut = 0;
+    const hideMessage = message.loading('正在切换主题！', timeOut);
+    themeColorClient.changeColor(newPrimaryColor).finally(() => hideMessage());
+  }
 };
 
 /*