diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md index 7dfad76e19..7c70e88731 100644 --- a/docs/react/customize-theme.en-US.md +++ b/docs/react/customize-theme.en-US.md @@ -100,50 +100,6 @@ Another approach to customize theme is creating a `less` file within variables t Note: This way will load the styles of all components, regardless of your demand, which cause `style` option of `babel-plugin-import` not working. -### Use dark theme - -![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*mYU9R4YFxscAAAAAAAAAAABkARQnAQ) - -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 -``` - -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'); - -// webpack.config.js -module.exports = { - rules: [{ - test: /\.less$/, - use: [{ - loader: 'style-loader', - }, { - loader: 'css-loader', // translates CSS into CommonJS - }, { - loader: 'less-loader', // compiles Less to CSS -+ options: { -+ modifyVars: { -+ 'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`, -+ ...darkThemeVars, -+ }, -+ javascriptEnabled: true, -+ }, - }], - // ...other rules - }], - // ...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. @@ -177,7 +133,72 @@ You must import styles as less format. A common mistake would be importing multi We have some official themes, try them out and give us some feedback! -- [Aliyun Console Theme (Beta)](https://github.com/ant-design/ant-design-aliyun-theme) +- 🌑 Dark Theme (follow document below) +- ☁️ [Aliyun Console Theme (Beta)](https://github.com/ant-design/ant-design-aliyun-theme) + +### Use dark theme + +![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*mYU9R4YFxscAAAAAAAAAAABkARQnAQ) + +Method 1: using Umi 3 + +If you're using [Umi 3](http://umijs.org/zh/), which only need two steps: + +1. Install `@umijs/plugin-antd` plugin; + + ```bash + $ npm i @umijs/plugin-antd -D + ``` + +2. set `dark: true`. + + ```js + // .umirc.ts or config/config.ts + export default { + antd: { + dark: true, + }, + }, + ``` + +Method 2: Import [antd/dist/antd.dark.less](https://unpkg.com/browse/antd@4.x/dist/antd.dark.less) in the style file: + +```less +@import '~antd/dist/antd.dark.less'; // Introduce the official dark less style entry file +``` + +If the project does not use Less, you can import [antd.dark.css](https://unpkg.com/browse/antd@4.x/dist/antd.dark.css) in the CSS file: + +```css +@import '~antd/dist/antd.dark.css'; +``` + +Method 3: 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'); + +// webpack.config.js +module.exports = { + rules: [{ + test: /\.less$/, + use: [{ + loader: 'style-loader', + }, { + loader: 'css-loader', // translates CSS into CommonJS + }, { + loader: 'less-loader', // compiles Less to CSS ++ options: { ++ modifyVars: { ++ 'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`, ++ ...darkThemeVars, ++ }, ++ javascriptEnabled: true, ++ }, + }], + }], +} +``` ## Related Articles diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md index 4ca825b693..79a0ab315a 100644 --- a/docs/react/customize-theme.zh-CN.md +++ b/docs/react/customize-theme.zh-CN.md @@ -100,17 +100,58 @@ module.exports = { 注意，这种方式已经载入了所有组件的样式，不需要也无法和按需加载插件 `babel-plugin-import` 的 `style` 属性一起使用。 +## 没有生效？ + +注意样式必须加载 less 格式，一个常见的问题就是引入了多份样式，less 的样式被 css 的样式覆盖了。 + +- 如果你在使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 的 `style` 配置来引入样式，需要将配置值从 `'css'` 改为 `true`，这样会引入 less 文件。 +- 如果你是通过 `'antd/dist/antd.css'` 引入样式的，改为 `antd/dist/antd.less`。 + +## 官方主题 🌈 + +我们提供了一些官方主题，欢迎在项目中试用，并且给我们提供反馈。 + +- 🌑 暗色主题（用法见下方文档） +- ☁️ [阿里云控制台主题（Beta）](https://github.com/ant-design/ant-design-aliyun-theme) + ### 使用暗色主题 ![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*mYU9R4YFxscAAAAAAAAAAABkARQnAQ) -方式一：是在样式文件全量引入 `antd/dist/antd.dark.less`： +方式一：使用 Umi 3 + +如果你在使用 [Umi 3](http://umijs.org/zh/)，仅需两步： + +1. 安装 `@umijs/plugin-antd` 插件; + + ```bash + $ npm i @umijs/plugin-antd -D + ``` + +2. 配置 `dark: true`。 + + ```js + // .umirc.ts or config/config.ts + export default { + antd: { + dark: true, + }, + }, + ``` + +方式二：是在样式文件全量引入 [antd.dark.less](https://unpkg.com/browse/antd@4.x/dist/antd.dark.less)。 ```less @import '~antd/dist/antd.dark.less'; // 引入官方提供的暗色 less 样式入口文件 ``` -方式二：是用在 `webpack.config.js` 使用 [less-loader](https://github.com/webpack-contrib/less-loader) 按需引入： +如果项目不使用 Less，可在 CSS 文件中，全量引入 [antd.dark.css](https://unpkg.com/browse/antd@4.x/dist/antd.dark.css)。 + +```css +@import '~antd/dist/antd.dark.css'; +``` + +方式三：是用在 `webpack.config.js` 使用 [less-loader](https://github.com/webpack-contrib/less-loader) 按需引入： ```diff const darkThemeVars = require('antd/dist/dark-theme'); @@ -133,30 +174,10 @@ module.exports = { + javascriptEnabled: true, + }, }], - // ...other rules }], - // ...other config +}; ``` -方式三：如果项目不使用 Less，可在 CSS 文件中，全量引入 `antd.dark.css`： - -```css -@import '~antd/dist/antd.dark.css'; -``` - -## 没有生效？ - -注意样式必须加载 less 格式，一个常见的问题就是引入了多份样式，less 的样式被 css 的样式覆盖了。 - -- 如果你在使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 的 `style` 配置来引入样式，需要将配置值从 `'css'` 改为 `true`，这样会引入 less 文件。 -- 如果你是通过 `'antd/dist/antd.css'` 引入样式的，改为 `antd/dist/antd.less`。 - -## 官方主题 🌈 - -我们提供了一些官方主题，欢迎在项目中试用，并且给我们提供反馈。 - -- [阿里云控制台主题（Beta）](https://github.com/ant-design/ant-design-aliyun-theme) - ## 社区教程 - [Using Ant Design in Sass-Styled Webpack Projects with `antd-scss-theme-plugin`](https://intoli.com/blog/antd-scss-theme-plugin/)