Optimize and resolve theme color replacement issues (#4507)

* 动态主题文件名（解决缓存问题）；简化客户端调用

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,
       },
     ]);
   }

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"
     ]
   }
-}
+}

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);
   },
 };

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());
+  }
 };
 
 /*