mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-19 06:43:16 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

Merge pull request #20070 from ant-design/chore-dark-theme-components

Browse Source 
fix: dark theme components
This commit is contained in:
信鑫-King 2019-12-05 00:17:46 +08:00 committed by GitHub
commit 2a26f0e95e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 73 additions and 85 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/antd-dark.less
// Build less entry file: dist/dark.less
fs.writeFileSync(
path.join(process.cwd(), 'dist', 'antd-dark.less'),
path.join(process.cwd(), 'dist', '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/antd-dark.less');
console.log('Built a entry less file to dist/dark.less');
// Build antd-dark.js: dist/antd-dark.js, for less-loader
// Build dark.js: dist/dark.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', 'antd-dark.js'),
path.join(process.cwd(), 'dist', 'dark.js'),
`module.exports = ${JSON.stringify(darkPaletteLess, null, 2)};`,
);
// eslint-disable-next-line
console.log('Built a dark theme js file to dist/antd-dark.js');
console.log('Built a dark theme js file to dist/dark.js');
}
}

12
components/button/style/mixin.less
View File

@ -67,10 +67,7 @@
&:hover,
&:focus {
& when (@theme = dark) {
.button-color(
~`colorPalette('@{btn-primary-bg}', 7) `; @background;
~`colorPalette('@{btn-primary-bg}', 7) `
);
.button-color(@primary-5; @background; @primary-5);
}
& when not (@theme = dark) {
.button-color(
@ -82,12 +79,9 @@
&:active,
&.active {
& when (@theme = dark) {
.button-color(
~`colorPalette('@{btn-primary-bg}', 5) `; @background;
~`colorPalette('@{btn-primary-bg}', 5) `
);
.button-color(@primary-7; @background; @primary-7);
}
& when not (@theme = default) {
& when not (@theme = dark) {
.button-color(
~`colorPalette('@{btn-primary-bg}', 7) `; @background;
~`colorPalette('@{btn-primary-bg}', 7) `

2
components/cascader/style/index.less
View File

@ -169,7 +169,7 @@
overflow: auto;
vertical-align: top;
list-style: none;
border-right: @border-width-base @border-style-base @border-color-split;
border-right: @border-width-base @border-style-base @cascader-menu-border-color-split;
-ms-overflow-style: -ms-autohiding-scrollbar; // https://github.com/ant-design/ant-design/issues/11857
&:first-child {

7
components/input/style/index.less
View File

@ -37,12 +37,7 @@
transition: all 0.3s;
&:hover {
& when (@theme = dark) {
color: fade(@white, 85%);
}
& when not (@theme = default) {
color: fade(@black, 85%);
}
color: @input-icon-hover-color;
}
}

7
components/input/style/search-input.less
View File

@ -11,12 +11,7 @@
cursor: pointer;
transition: all 0.3s;
&:hover {
& when (@theme = dark) {
color: fade(@white, 85%);
}
& when not (@theme = dark) {
color: fade(@black, 85%);
}
color: @input-icon-hover-color;
}
}

2
components/modal/style/modal.less
View File

@ -83,7 +83,7 @@
padding: 16px 24px;
color: @text-color;
background: @modal-header-bg;
border-bottom: @border-width-base @border-style-base @border-color-split;
border-bottom: @border-width-base @border-style-base @modal-header-border-color-split;
border-radius: @border-radius-base @border-radius-base 0 0;
}

15
components/progress/Circle.tsx
View File

@ -10,12 +10,6 @@ interface CircleProps extends ProgressProps {
progressStatus: string;
}
const statusColorMap: Record<string, string> = {
normal: '#108ee9',
exception: '#ff5500',
success: '#87d068',
};
function getPercentage({ percent, successPercent }: CircleProps) {
const ptg = validProgress(percent);
if (!successPercent) {
@ -26,12 +20,12 @@ function getPercentage({ percent, successPercent }: CircleProps) {
return [successPercent, validProgress(ptg - successPtg)];
}
function getStrokeColor({ progressStatus, successPercent, strokeColor }: CircleProps) {
const color = strokeColor || statusColorMap[progressStatus];
function getStrokeColor({ successPercent, strokeColor }: CircleProps) {
const color = strokeColor || null;
if (!successPercent) {
return color;
}
return [statusColorMap.success, color];
return [null, color];
}
const Circle: React.SFC<CircleProps> = props => {
@ -55,7 +49,8 @@ const Circle: React.SFC<CircleProps> = props => {
const circleWidth = strokeWidth || 6;
const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top';
const gapDeg = gapDegree || (type === 'dashboard' ? 75 : undefined);
const strokeColor = getStrokeColor(props);
// using className to style stroke color
const strokeColor = getStrokeColor(props) as string | string[] | object;
const isGradient = Object.prototype.toString.call(strokeColor) === '[object Object]';
const wrapperClassName = classNames(`${prefixCls}-inner`, {

32
components/progress/__tests__/__snapshots__/demo.test.js.snap
View File

@ -32,7 +32,7 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
stroke=""
stroke-linecap="round"
stroke-width="6"
style="stroke:#108ee9;stroke-dasharray:221.48228207808043px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
style="stroke-dasharray:221.48228207808043px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
</svg>
<span
@ -73,7 +73,7 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
stroke=""
stroke-linecap="round"
stroke-width="6"
style="stroke:#ff5500;stroke-dasharray:206.7167966062084px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
style="stroke-dasharray:206.7167966062084px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
</svg>
<span
@ -132,7 +132,7 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
stroke=""
stroke-linecap="round"
stroke-width="6"
style="stroke:#87d068;stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
</svg>
<span
@ -196,7 +196,7 @@ exports[`renders ./components/progress/demo/circle-dynamic.md correctly 1`] = `
stroke=""
stroke-linecap="round"
stroke-width="0"
style="stroke:#108ee9;stroke-dasharray:0px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
style="stroke-dasharray:0px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
</svg>
<span
@ -300,7 +300,7 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
stroke=""
stroke-linecap="round"
stroke-width="6"
style="stroke:#108ee9;stroke-dasharray:88.59291283123217px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
style="stroke-dasharray:88.59291283123217px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
</svg>
<span
@ -341,7 +341,7 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
stroke=""
stroke-linecap="round"
stroke-width="6"
style="stroke:#ff5500;stroke-dasharray:206.7167966062084px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
style="stroke-dasharray:206.7167966062084px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
</svg>
<span
@ -400,7 +400,7 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
stroke=""
stroke-linecap="round"
stroke-width="6"
style="stroke:#87d068;stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
</svg>
<span
@ -463,7 +463,7 @@ exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = `
stroke=""
stroke-linecap="round"
stroke-width="6"
style="stroke:#108ee9;stroke-dasharray:165.23228207808043px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
style="stroke-dasharray:165.23228207808043px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
</svg>
<span
@ -595,7 +595,7 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
stroke=""
stroke-linecap="round"
stroke-width="6"
style="stroke:#108ee9;stroke-dasharray:221.48228207808043px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
style="stroke-dasharray:221.48228207808043px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
</svg>
<span
@ -636,7 +636,7 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
stroke=""
stroke-linecap="round"
stroke-width="6"
style="stroke:#87d068;stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
</svg>
<span
@ -1189,7 +1189,7 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
stroke=""
stroke-linecap="square"
stroke-width="6"
style="stroke:#108ee9;stroke-dasharray:221.48228207808043px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
style="stroke-dasharray:221.48228207808043px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
</svg>
<span
@ -1230,7 +1230,7 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
stroke=""
stroke-linecap="square"
stroke-width="6"
style="stroke:#108ee9;stroke-dasharray:165.23228207808043px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
style="stroke-dasharray:165.23228207808043px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
</svg>
<span
@ -1304,7 +1304,7 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
stroke=""
stroke-linecap="round"
stroke-width="6"
style="stroke:#108ee9;stroke-dasharray:88.59291283123217px 295.3097094374406px;stroke-dashoffset:-88.59291283123217px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
style="stroke-dasharray:88.59291283123217px 295.3097094374406px;stroke-dashoffset:-88.59291283123217px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
<path
class="ant-progress-circle-path"
@ -1315,7 +1315,7 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
stroke=""
stroke-linecap="round"
stroke-width="6"
style="stroke:#87d068;stroke-dasharray:88.59291283123217px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
style="stroke-dasharray:88.59291283123217px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
</svg>
<span
@ -1356,7 +1356,7 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
stroke=""
stroke-linecap="round"
stroke-width="6"
style="stroke:#108ee9;stroke-dasharray:66.09291283123217px 295.3097094374406px;stroke-dashoffset:-103.59291283123217px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
style="stroke-dasharray:66.09291283123217px 295.3097094374406px;stroke-dashoffset:-103.59291283123217px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
<path
class="ant-progress-circle-path"
@ -1367,7 +1367,7 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
stroke=""
stroke-linecap="round"
stroke-width="6"
style="stroke:#87d068;stroke-dasharray:66.09291283123217px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
style="stroke-dasharray:66.09291283123217px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/>
</svg>
<span

2
components/select/style/index.less
View File

@ -109,7 +109,7 @@
line-height: 1;
text-align: center;
text-transform: none;
background: @select-background;
background: @select-clear-background;
cursor: pointer;
opacity: 0;
transition: color 0.3s ease, opacity 0.15s ease;

2
components/skeleton/style/index.less
View File

@ -7,8 +7,6 @@
@skeleton-paragraph-prefix-cls: ~'@{skeleton-prefix-cls}-paragraph';
@skeleton-button-prefix-cls: ~'@{skeleton-prefix-cls}-button';
@skeleton-to-color: shade(@skeleton-color, 5%);
.@{skeleton-prefix-cls} {
display: table;
width: 100%;

26
components/style/themes/dark.less
View File

@ -158,6 +158,9 @@
@primary-9: @blue-9; // unused
@primary-10: @blue-10; // unused
// -------- Colors -----------
@error-color: @red-6;
// Layer background
@gray-11: #1f1f1f;
@body-background: @black;
@ -179,6 +182,7 @@
// Border color
@border-color-base: #434343; // base border outline a component
@border-color-split: @gray-11; // split border inside a component
@border-color-split-popover: #303030; // base border in Popover Container
@background-color-light: fade(@white, 4%); // background of header and selected item
@background-color-base: fade(@white, 8%); // Default grey background color
@ -194,7 +198,7 @@
// Shadow
// ---
@shadow-color: rgba(0, 0, 0, 0.15);
@shadow-color: rgba(0, 0, 0, 0.45);
@shadow-color-inverse: @component-background;
@box-shadow-base: @shadow-2;
@shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.24), 0 -9px 28px 0 rgba(0, 0, 0, 0.15),
@ -214,9 +218,6 @@
@btn-default-bg: transparent;
@btn-danger-bg: @red-7;
@btn-danger-border: @red-7;
@btn-default-ghost-color: @text-color;
@btn-default-ghost-border: fade(@white, 25%);
@ -231,7 +232,9 @@
// Modal
// ---
@modal-header-bg: @gray-11;
@modal-header-border-color-split: @border-color-split-popover;
@modal-content-bg: @gray-11;
@modal-footer-border-color-split: @border-color-split-popover;
// Radio
// ---
@ -256,16 +259,19 @@
@input-placeholder-color: fade(@white, 30%);
@input-number-handler-bg: transparent;
@input-number-handler-active-bg: @gray-11;
@input-icon-hover-color: fade(@white, 85%);
// Select
// ---
@select-background: transparent;
@select-dropdown-bg: @gray-11;
@select-clear-background: @component-background;
// Cascader
// ---
@cascader-bg: transparent;
@cascader-menu-bg: @gray-11;
@cascader-menu-border-color-split: @border-color-split-popover;
// Anchor
// ---
@ -296,9 +302,11 @@
// --
@table-header-bg: #1d1d1d;
@table-header-bg-sm: @table-header-bg;
@table-body-sort-bg: fade(@white, 1%);
@table-row-hover-bg: #262626;
@table-header-filter-active-bg: @item-hover-bg;
@table-header-sort-active-bg: @item-hover-bg;
@table-header-sort-bg: #262626;
@table-header-filter-active-bg: #434343;
@table-header-sort-active-bg: #262626;
// TimePicker
// ---
@ -346,6 +354,10 @@
@card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.48), 0 3px 6px 0 rgba(0, 0, 0, 0.36),
0 5px 12px 4px rgba(0, 0, 0, 0.27);
// Transfer
// ---
@transfer-item-hover-bg: #262626;
// Comment
// ---
@comment-bg: @component-background;
@ -371,9 +383,7 @@
@slider-rail-background-color: fade(@white, 20%);
@slider-rail-background-color-hover: @slider-rail-background-color;
@slider-track-background-color: @primary-color;
@slider-track-background-color-hover: @slider-track-background-color;
@slider-handle-color: @primary-color;
@slider-handle-color-hover: @slider-handle-color;
// Skeleton
// ---

7
components/style/themes/default.less
View File

@ -113,6 +113,7 @@
// Border color
@border-color-base: hsv(0, 0, 85%); // base border outline a component
@border-color-split: hsv(0, 0, 94%); // split border inside a component
@border-color-split-popover: @border-color-split; // base border in Popover Container
@border-color-inverse: @white;
@border-width-base: 1px; // width of the border for a component
@border-style-base: solid; // style of a components border
@ -349,6 +350,7 @@
@input-hover-border-color: @primary-5;
@input-disabled-bg: @disabled-bg;
@input-outline-offset: 0 0;
@input-icon-hover-color: fade(@black, 85%);
// Mentions
// ---
@ -362,12 +364,14 @@
@select-item-selected-bg: @blue-1;
@select-item-active-bg: @item-hover-bg;
@select-background: @component-background;
@select-clear-background: @select-background;
// Cascader
// ---
@cascader-bg: @component-background;
@cascader-item-selected-bg: @blue-1;
@cascader-menu-bg: @component-background;
@cascader-menu-border-color-split: @border-color-split;
// Anchor
// ---
@ -411,6 +415,7 @@
// --
@modal-body-padding: 24px;
@modal-header-bg: @component-background;
@modal-header-border-color-split: @border-color-split;
@modal-content-bg: @component-background;
@modal-heading-color: @heading-color;
@modal-footer-bg: transparent;
@ -676,12 +681,14 @@
// Skeleton
// ---
@skeleton-color: #f2f2f2;
@skeleton-to-color: shade(@skeleton-color, 5%);
// Transfer
// ---
@transfer-header-height: 40px;
@transfer-disabled-bg: @disabled-bg;
@transfer-list-height: 200px;
@transfer-item-hover-bg: @item-hover-bg;
// Message
// ---

8
components/table/style/index.less
View File

@ -499,13 +499,7 @@
}
.@{table-prefix-cls}-cell-fix-left-last::after {
& when (@theme = dark) {
box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.48), 0 3px 6px 0 rgba(0, 0, 0, 0.36),
0 5px 12px 4px rgba(0, 0, 0, 0.27);
}
& when not (@theme = dark) {
box-shadow: inset 10px 0 8px -8px darken(@shadow-color, 5%);
}
box-shadow: inset 10px 0 8px -8px darken(@shadow-color, 5%);
}
}
&-ping-right {

2
components/transfer/style/index.less
View File

@ -122,7 +122,7 @@
}
&-item:not(&-item-disabled):hover {
background-color: @item-hover-bg;
background-color: @transfer-item-hover-bg;
cursor: pointer;
}

8
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/antd-dark.less` in the style file:
include `antd/dist/dark.less` in the style file:
```less
@import '~antd/dist/antd-dark.less'; // Introduce the official dark less style entry file
@import '~antd/dist/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:
```js
const darkThemeVars = require('antd/dist/antd-dark');
```diff
const darkThemeVars = require('antd/dist/dark');
// webpack.config.js
module.exports = {

8
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/antd-dark.less`：
一种方式是在样式文件全量引入 `antd/dist/dark.less`：
```less
@import '~antd/dist/antd-dark.less'; // 引入官方提供的暗色 less 样式入口文件
@import '~antd/dist/dark.less'; // 引入官方提供的暗色 less 样式入口文件
```
另一种是用在 `webpack.config.js` 使用 [less-loader](https://github.com/webpack-contrib/less-loader) 按需引入：
```js
const darkThemeVars = require('antd/dist/antd-dark');
```diff
const darkThemeVars = require('antd/dist/dark');
// webpack.config.js
module.exports = {

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "antd",
"version": "4.0.0-alpha.12",
"version": "4.0.0-alpha.13",
"description": "An enterprise-class UI design language and React components implementation",
"keywords": [
"ant",

4
tests/dekko/dist.test.js
View File

@ -10,8 +10,8 @@ $('dist')
.hasFile('antd.js')
.hasFile('antd.min.js')
.hasFile('antd.less')
.hasFile('antd-dark.less')
.hasFile('antd-dark.js');
.hasFile('dark.less')
.hasFile('dark.js');
// eslint-disable-next-line
console.log(chalk.green('✨ `dist` directory is valid.'));