docs: Dark theme in create-react-app (#22234)

* docs: Use dark theme in create-react-app

* docs: Customize theme fix

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

@@ -127,7 +127,7 @@ module.exports = {
       loader: 'less-loader', // compiles Less to CSS
 +     options: {
 +       modifyVars: {
-+          'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`
++          'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`,
 +          ...darkThemeVars,
 +       },
 +       javascriptEnabled: true,

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

@@ -127,7 +127,7 @@ module.exports = {
       loader: 'less-loader', // compiles Less to CSS
 +     options: {
 +       modifyVars: {
-+          'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`
++          'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`,
 +          ...darkThemeVars,
 +       },
 +       javascriptEnabled: true,

docs/react/use-with-create-react-app.en-US.md

@@ -197,7 +197,30 @@ module.exports = override(
 );
 ```
 
-We use `modifyVars` option of [less-loader](https://github.com/webpack/less-loader#less-options) here, you can see a green button rendered on the page after rebooting the start server.
+We use `modifyVars` option of [less-loader](https://github.com/webpack/less-loader#less-options) here. If you see a green button rendered on the page after rebooting the server, then the configuration was successful.
+
+### Use custom dark theme
+
+```diff
+const { override, fixBabelImports, addLessLoader } = require('customize-cra');
++ const darkThemeVars = require('antd/dist/dark-theme');
+
+module.exports = override(
+  fixBabelImports('import', {
+    libraryName: 'antd',
+    libraryDirectory: 'es',
+    style: true,
+  }),
+  addLessLoader({
+    javascriptEnabled: true,
+    modifyVars: {
++     'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`,
++     ...darkThemeVars,
+      '@primary-color': '#1DA57A'
+      },
+  }),
+);
+```
 
 > You could also try [craco](https://github.com/sharegate/craco) and [craco-antd](https://github.com/FormAPI/craco-antd) to customize create-react-app webpack config same as customize-cra does.
 

docs/react/use-with-create-react-app.zh-CN.md

@@ -197,9 +197,30 @@ module.exports = override(
 );
 ```
 
-这里利用了 [less-loader](https://github.com/webpack/less-loader#less-options) 的 `modifyVars` 来进行主题配置，变量和其他配置方式可以参考 [配置主题](/docs/react/customize-theme) 文档。
+这里利用了 [less-loader](https://github.com/webpack/less-loader#less-options) 的 `modifyVars` 来进行主题配置，变量和其他配置方式可以参考 [配置主题](/docs/react/customize-theme) 文档。修改后重启 `yarn start`，如果看到一个绿色的按钮就说明配置成功了。
 
-修改后重启 `yarn start`，如果看到一个绿色的按钮就说明配置成功了。
+### 使用自定义深色主题
+
+```diff
+const { override, fixBabelImports, addLessLoader } = require('customize-cra');
++ const darkThemeVars = require('antd/dist/dark-theme');
+
+module.exports = override(
+  fixBabelImports('import', {
+    libraryName: 'antd',
+    libraryDirectory: 'es',
+    style: true,
+  }),
+  addLessLoader({
+    javascriptEnabled: true,
+    modifyVars: {
++     'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`,
++     ...darkThemeVars,
+      '@primary-color': '#1DA57A'
+      },
+  }),
+);
+```
 
 > 你也可以使用 [craco](https://github.com/sharegate/craco) 和 [craco-antd](https://github.com/FormAPI/craco-antd) 来实现和 customize-cra 一样的修改 create-react-app 配置的功能。