tweak: antd dark theme in as required usage

.antd-tools.config.js

@@ -1,5 +1,7 @@
 const fs = require('fs');
 const path = require('path');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const lessToJs = require('less-vars-to-js');
 const packageInfo = require('./package.json');
 
 // We need compile additional content for antd user
@@ -66,6 +68,26 @@ function finalizeDist() {
 
     // eslint-disable-next-line
     console.log('Built a entry less file to dist/antd-dark.less');
+
+    // Build antd-dark.js: dist/antd-dark.js, for less-loader
+    const stylePath = path.join(process.cwd(), 'lib', 'style');
+
+    const colorLess = fs.readFileSync(path.join(stylePath, 'color', 'colors.less'), 'utf8');
+    const defaultLess = fs.readFileSync(path.join(stylePath, 'themes', 'default.less'), 'utf8');
+    const darkLess = fs.readFileSync(path.join(stylePath, 'themes', 'dark.less'), 'utf8');
+
+    const darkPaletteLess = lessToJs(`${colorLess}${defaultLess}${darkLess}`, {
+      resolveVariables: false,
+      stripPrefix: true,
+    });
+
+    fs.writeFileSync(
+      path.join(process.cwd(), 'dist', 'antd-dark.js'),
+      `module.exports = ${JSON.stringify(darkPaletteLess, null, 2)};`,
+    );
+
+    // eslint-disable-next-line
+    console.log('Built a dark theme js file to dist/antd-dark.js');
   }
 }
 

docs/react/customize-theme.en-US.md

@@ -22,8 +22,8 @@ There are some major variables below, all less variables could be found in [Defa
 @font-size-base: 14px; // major text font size
 @heading-color: rgba(0, 0, 0, 0.85); // heading text color
 @text-color: rgba(0, 0, 0, 0.65); // major text color
-@text-color-secondary : rgba(0, 0, 0, .45); // secondary text color
+@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
-@disabled-color : rgba(0, 0, 0, .25); // disable state color
+@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
 @border-radius-base: 4px; // major border radius
 @border-color-base: #d9d9d9; // major border color
 @box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // major shadow for layers
@@ -112,18 +112,8 @@ include `antd/dist/antd-dark.less` in the style file:
 
 Another approach to using [less-loader](https://github.com/webpack-contrib/less-loader) in `webpack.config.js` to introduce as needed:
 
-```js
+````js
-const lessToJs = require('less-vars-to-js');
+const darkThemeVars = require('antd/dist/antd-dark');
-const fs = require('fs');
-
-const colorLess = fs.readFileSync(require.resolve('antd/lib/style/color/colors.less'), 'utf8');
-const defaultLess = fs.readFileSync(require.resolve('antd/lib/style/themes/default.less'), 'utf8');
-const darkLess = fs.readFileSync(require.resolve('antd/lib/style/themes/dark.less'), 'utf8');
-
-const darkThemeVars = lessToJs(`${colorLess}${defaultLess}${darkLess}`, {
-  resolveVariables: false,
-  stripPrefix: false,
-})
 
 // webpack.config.js
 module.exports = {
@@ -159,7 +149,7 @@ It's possible to configure webpack to load an alternate less file:
 new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/myStylesReplacement.less') )
 
 #antd { @import '~antd/es/style/core/index.less'; @import '~antd/es/style/themes/default.less'; }
-```
+````
 
 Where the src/myStylesReplacement.less file loads the same files as the index.less file, but loads them within the scope of a top-level selector : the result is that all of the "global" styles are being applied with the #antd scope.
 

docs/react/customize-theme.zh-CN.md

@@ -22,8 +22,8 @@ antd 的样式使用了 [Less](http://lesscss.org/) 作为开发语言，并定
 @font-size-base: 14px; // 主字号
 @heading-color: rgba(0, 0, 0, 0.85); // 标题色
 @text-color: rgba(0, 0, 0, 0.65); // 主文本色
-@text-color-secondary : rgba(0, 0, 0, .45); // 次文本色
+@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
-@disabled-color : rgba(0, 0, 0, .25); // 失效色
+@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
 @border-radius-base: 4px; // 组件/浮层圆角
 @border-color-base: #d9d9d9; // 边框色
 @box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影
@@ -113,17 +113,7 @@ module.exports = {
 另一种是用在 `webpack.config.js` 使用 [less-loader](https://github.com/webpack-contrib/less-loader) 按需引入：
 
 ```js
-const lessToJs = require('less-vars-to-js');
+const darkThemeVars = require('antd/dist/antd-dark');
-const fs = require('fs');
-
-const colorLess = fs.readFileSync(require.resolve('antd/lib/style/color/colors.less'), 'utf8');
-const defaultLess = fs.readFileSync(require.resolve('antd/lib/style/themes/default.less'), 'utf8');
-const darkLess = fs.readFileSync(require.resolve('antd/lib/style/themes/dark.less'), 'utf8');
-
-const darkThemeVars = lessToJs(`${colorLess}${defaultLess}${darkLess}`, {
-  resolveVariables: false,
-  stripPrefix: false,
-})
 
 // webpack.config.js
 module.exports = {

package.json

@@ -107,7 +107,7 @@
     "prop-types": "^15.7.2",
     "raf": "^3.4.1",
     "rc-animate": "^2.10.2",
-"rc-calendar": "~9.15.7",
+    "rc-calendar": "~9.15.7",
     "rc-cascader": "~1.0.0-alpha.0",
     "rc-checkbox": "~2.1.6",
     "rc-collapse": "~1.11.3",
@@ -201,6 +201,7 @@
     "jest": "^24.8.0",
     "jsdom": "^15.1.1",
     "jsonml.js": "^0.1.0",
+    "less-vars-to-js": "^1.3.0",
     "logrocket": "^1.0.0",
     "logrocket-react": "^4.0.0",
     "lz-string": "^1.4.4",