mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
docs: 📖 use dark theme (#21668)
* docs: using umi 3
* docs: 📖 update dark theme usage doc
Co-authored-by: afc163 <afc163@gmail.com>
This commit is contained in:
信鑫-King
GitHub
parent
66f67051af
commit
296072a720
@ -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
|
||||
|
||||
|
||||
|
||||
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
|
||||
|
||||
|
||||
|
||||
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
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
### 使用暗色主题
|
||||
|
||||
|
||||
|
||||
方式一：是在样式文件全量引入 `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/)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user