fix: dark theme in 4.0 (#20642)

* fix: rtl direction bug

* 📝 dark theme usage docs

* fix: sketch download

* fix: theme dark

* 📝 empty image

* fix: dark form with mixture components like picker, input

* 📝 update sketch release download

* fix: remove inline-menu sub shadow

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

@@ -104,13 +104,13 @@ Note: This way will load the styles of all components, regardless of your demand
 
 ![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*mYU9R4YFxscAAAAAAAAAAABkARQnAQ)
 
-include `antd/dist/antd.dark.less` in the style file:
+Method 1: include `antd/dist/antd.dark.less` in the style file:
 
 ```less
 @import '~antd/dist/antd.dark.less'; // Introduce the official dark less style entry file
 ```
 
-Another approach to using [less-loader](https://github.com/webpack-contrib/less-loader) in `webpack.config.js` to introduce as needed:
+Method 2: using [less-loader](https://github.com/webpack-contrib/less-loader) in `webpack.config.js` to introduce as needed:
 
 ```diff
 const darkThemeVars = require('antd/dist/dark-theme');
@@ -126,7 +126,10 @@ module.exports = {
     }, {
       loader: 'less-loader', // compiles Less to CSS
 +     options: {
-+       modifyVars: darkThemeVars,
++       modifyVars: {
++          'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`
++          ...darkThemeVars,
++       },
 +       javascriptEnabled: true,
 +     },
     }],
@@ -135,6 +138,12 @@ module.exports = {
   // ...other config
 ```
 
+Method 3: If the project does not use Less, you can include `antd.dark.css` in the CSS file in full:
+
+```css
+@import '~antd/dist/antd.dark.css';
+```
+
 ## How to avoid modifying global styles?
 
 Currently ant-design is designed as a whole experience and modify global styles (eg `body` etc). If you need to integrate ant-design as a part of an existing website, it's likely you want to prevent ant-design to override global styles.