mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

📝 use dark-theme.js, antd.dark.less and css

Browse Source
This commit is contained in:
ycjcl868 2019-12-06 21:09:57 +08:00
parent 0024365962
commit 1ecf02b00a
3 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.antd-tools.config.js
View File

@ -60,16 +60,16 @@ function finalizeDist() {
// eslint-disable-next-line
console.log('Built a entry less file to dist/antd.less');
// Build less entry file: dist/dark.less
// Build less entry file: dist/antd.dark.less
fs.writeFileSync(
path.join(process.cwd(), 'dist', 'dark.less'),
path.join(process.cwd(), 'dist', 'antd.dark.less'),
'@import "../lib/style/dark.less";\n@import "../lib/style/components.less";',
);
// eslint-disable-next-line
console.log('Built a entry less file to dist/dark.less');
console.log('Built a entry less file to dist/antd.dark.less');
// Build dark.js: dist/dark.js, for less-loader
// Build dark.js: dist/dark-theme.js, for less-loader
const stylePath = path.join(process.cwd(), 'components', 'style');
const colorLess = fs.readFileSync(path.join(stylePath, 'color', 'colors.less'), 'utf8');
@ -82,12 +82,12 @@ function finalizeDist() {
});
fs.writeFileSync(
path.join(process.cwd(), 'dist', 'dark.js'),
path.join(process.cwd(), 'dist', 'dark-theme.js'),
`module.exports = ${JSON.stringify(darkPaletteLess, null, 2)};`,
);
// eslint-disable-next-line
console.log('Built a dark theme js file to dist/dark.js');
console.log('Built a dark theme js file to dist/dark-theme.js');
}
}

6
docs/react/customize-theme.en-US.md
View File

@ -104,16 +104,16 @@ Note: This way will load the styles of all components, regardless of your demand
![](https://gw.alipayobjects.com/zos/antfincdn/wp6GpGo%26ID/f31e18a4-2018-4e12-95c6-998e7ac5b2fa.png)
include `antd/dist/dark.less` in the style file:
include `antd/dist/antd.dark.less` in the style file:
```less
@import '~antd/dist/dark.less'; // Introduce the official dark less style entry file
@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:
```diff
const darkThemeVars = require('antd/dist/dark');
const darkThemeVars = require('antd/dist/dark-theme');
// webpack.config.js
module.exports = {

6
docs/react/customize-theme.zh-CN.md
View File

@ -104,16 +104,16 @@ module.exports = {
![](https://gw.alipayobjects.com/zos/antfincdn/wp6GpGo%26ID/f31e18a4-2018-4e12-95c6-998e7ac5b2fa.png)
一种方式是在样式文件全量引入 `antd/dist/dark.less`：
一种方式是在样式文件全量引入 `antd/dist/antd.dark.less`：
```less
@import '~antd/dist/dark.less'; // 引入官方提供的暗色 less 样式入口文件
@import '~antd/dist/antd.dark.less'; // 引入官方提供的暗色 less 样式入口文件
```
另一种是用在 `webpack.config.js` 使用 [less-loader](https://github.com/webpack-contrib/less-loader) 按需引入：
```diff
const darkThemeVars = require('antd/dist/dark');
const darkThemeVars = require('antd/dist/dark-theme');
// webpack.config.js
module.exports = {