feat(antdsite): add themeConfig.themeColors and you can set theme col…

…ors of ant design.
YvesCoding · Aug 5, 2019 · 84873c8 · 84873c8
1 parent 93f1649
commit 84873c8
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 10 deletions.
diff --git a/packages/antdsite/__default__/default-config.js b/packages/antdsite/__default__/default-config.js
@@ -7,6 +7,7 @@ module.exports = {
   lang: 'en-US',
   head: [],
   themeConfig: {
+    themeColors: null,
     repo: null,
     docsRepo: null,
     docsDir: 'docs',
@@ -20,6 +21,6 @@ module.exports = {
     showBackToTop: true,
     maxTocDeep: 3,
     search: true,
-    searchMaxSuggestions: 10,
-  },
+    searchMaxSuggestions: 10
+  }
 };
diff --git a/packages/antdsite/lib/gatsby/onCreateWebpackConfig.js b/packages/antdsite/lib/gatsby/onCreateWebpackConfig.js
@@ -1,17 +1,19 @@
-const { resolveLayouts } = require('../util');
+const { resolveLayouts, setThemeColors } = require('../util');
 
 module.exports = ({ stage, actions, loaders }) => {
   resolveLayouts(actions);
+  setThemeColors(actions);
+
   if (stage === 'develop') {
     actions.setWebpackConfig({
       module: {
         rules: [
           {
             test: /react-hot-loader/,
-            use: [loaders.js()],
-          },
-        ],
-      },
+            use: [loaders.js()]
+          }
+        ]
+      }
     });
   }
 };
diff --git a/packages/antdsite/lib/util.js b/packages/antdsite/lib/util.js
@@ -117,9 +117,35 @@ module.exports.resolveLayouts = function(actions) {
     actions.setWebpackConfig({
       resolve: {
         alias: {
-          [`antdsite-${layout}`]: layoutPath,
-        },
-      },
+          [`antdsite-${layout}`]: layoutPath
+        }
+      }
     });
   });
 };
+
+module.exports.setThemeColors = function(actions) {
+  const config = module.exports.getFinalConfig();
+  const { themeColors } = config.themeConfig;
+
+  if (themeColors) {
+    actions.setWebpackConfig({
+      module: {
+        rules: [
+          {
+            test: /\.less$/,
+            use: [
+              {
+                loader: 'less-loader', // compiles Less to CSS
+                options: {
+                  modifyVars: themeColors,
+                  javascriptEnabled: true
+                }
+              }
+            ]
+          }
+        ]
+      }
+    });
+  }
+};
diff --git a/packages/antdsite/src/default-theme/assets/common.less b/packages/antdsite/src/default-theme/assets/common.less
@@ -145,3 +145,8 @@ a {
 .drawer {
   z-index: 1029;
 }
+
+// fix back-top icon background-size 1% bug when modifying the theme.
+.ant-back-top-icon {
+  background-size: 100% 100% !important;
+}