mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-06 00:44:17 +08:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

fix: dark theme in 4.0 (#20642)

Browse Source 
* 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
This commit is contained in:
信鑫-King 2020-01-03 19:00:01 +08:00 committed by GitHub
parent 619fc44b8c
commit cb528da8ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 103 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/button/index.en-US.md
View File

@ -64,6 +64,6 @@ Following the Ant Design specification, we will add one space between if Button
margin-right: 0;
}
[data-theme="dark"] .site-button-ghost-wrapper {
background: rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.2);
}
</style>

2
components/button/index.zh-CN.md
View File

@ -66,6 +66,6 @@ subtitle: 按钮
margin-right: 0;
}
[data-theme="dark"] .site-button-ghost-wrapper {
background: rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.2);
}
</style>

6
components/config-provider/demo/direction.md
View File

@ -611,3 +611,9 @@ ReactDOM.render(<App />, mountNode);
margin-left: 20px;
}
```
<style>
[data-theme="dark"] .head-example {
background: rgba(255,255,255,.12);
}
</style>

8
components/drawer/style/drawer.less
View File

@ -1,6 +1,7 @@
@import '../../style/themes/index';
@drawer-prefix-cls: ~'@{ant-prefix}-drawer';
@picker-prefix-cls: ~'@{ant-prefix}-picker';
.@{drawer-prefix-cls} {
position: fixed;
@ -231,6 +232,13 @@
box-shadow: @shadow-2;
}
}
// =================== Hook Components ===================
.@{picker-prefix-cls} {
&-clear {
background: @popover-background;
}
}
}
@keyframes antdDrawerFadeIn {

27
components/empty/index.en-US.md
View File

@ -30,8 +30,31 @@ Empty state placeholder.
- Empty.PRESENTED_IMAGE_SIMPLE
<img src="https://user-images.githubusercontent.com/507615/54591679-b0ceb580-4a65-11e9-925c-ad15b4eae93d.png" height="35px">
<div class="site-empty-buildIn-img site-empty-buildIn-simple"><div>
- Empty.PRESENTED_IMAGE_DEFAULT
<img src="https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png" height="100px">
<div class="site-empty-buildIn-img site-empty-buildIn-default"></div>
<style>
.site-empty-buildIn-img {
background-repeat: no-repeat;
background-size: cover;
}
.site-empty-buildIn-simple {
width: 55px;
height: 35px;
background-image: url("https://user-images.githubusercontent.com/507615/54591679-b0ceb580-4a65-11e9-925c-ad15b4eae93d.png");
}
.site-empty-buildIn-default {
width: 121px;
height: 116px;
background-image: url("https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png");
}
[data-theme="dark"] .site-empty-buildIn-simple {
background-image: url("https://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/oQFqhkmNPw/a38d2cdb-a33d-407c-8f8e-e3429699175d.png");
}
[data-theme="dark"] .site-empty-buildIn-default {
background-image: url("https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gfq-SoT3wF0AAAAAAAAAAABkARQnAQ");
}
</style>

4
components/empty/index.zh-CN.md
View File

@ -49,13 +49,13 @@ cols: 1
}
.site-empty-buildIn-default {
width: 121px;
height: 100px;
height: 116px;
background-image: url("https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png");
}
[data-theme="dark"] .site-empty-buildIn-simple {
background-image: url("https://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/oQFqhkmNPw/a38d2cdb-a33d-407c-8f8e-e3429699175d.png");
}
[data-theme="dark"] .site-empty-buildIn-default {
background-image: url("https://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/5kgxi7xhMT/f6a34113-f417-44ea-a558-c3e50b4d441e.png");
background-image: url("https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gfq-SoT3wF0AAAAAAAAAAABkARQnAQ");
}
</style>

3
components/form/style/components.less
View File

@ -14,6 +14,9 @@
.@{ant-prefix}-upload {
background: transparent;
}
.@{ant-prefix}-upload.@{ant-prefix}-upload-drag {
background: @background-color-light;
}
input[type='radio'],
input[type='checkbox'] {

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

@ -139,6 +139,12 @@
.@{ant-prefix}-input {
padding-right: 24px;
}
// https://github.com/ant-design/ant-design/issues/19884
.@{ant-prefix}-input-affix-wrapper {
.@{ant-prefix}-input-suffix {
padding-right: 18px;
}
}
// Fix issue: https://github.com/ant-design/ant-design/issues/7854
.@{ant-prefix}-input-search:not(.@{ant-prefix}-input-search-enter-button) {
@ -153,8 +159,6 @@
}
.@{ant-prefix}-input-password-icon {
margin-right: 18px;
.@{form-prefix-cls}-rtl & {
margin-right: 0;
margin-left: 18px;

5
components/input-number/style/index.less
View File

@ -3,6 +3,7 @@
@import '../../input/style/mixin';
@input-number-prefix-cls: ~'@{ant-prefix}-input-number';
@form-item-prefix-cls: ~'@{ant-prefix}-form-item';
.@{input-number-prefix-cls} {
.reset-component;
@ -51,6 +52,10 @@
&:hover {
.hover(@input-number-hover-border-color);
& + .@{form-item-prefix-cls}-children-icon {
opacity: 0;
transition: opacity 0.24s linear 0.24s;
}
}
&-focused {

2
components/input/style/mixin.less
View File

@ -451,7 +451,7 @@
z-index: 2;
display: flex;
align-items: center;
color: @input-color;
color: @input-icon-color;
line-height: 0;
transform: translateY(-50%);

2
components/menu/__tests__/__snapshots__/demo.test.js.snap
View File

@ -830,7 +830,7 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
class="ant-switch-inner"
/>
</button>
Change Theme
Change Style
<br />
<br />
<ul

2
components/menu/demo/switch-mode.md
View File

@ -47,7 +47,7 @@ class Sider extends React.Component {
<div>
<Switch onChange={this.changeMode} /> Change Mode
<span className="ant-divider" style={{ margin: '0 1em' }} />
<Switch onChange={this.changeTheme} /> Change Theme
<Switch onChange={this.changeTheme} /> Change Style
<br />
<br />
<Menu

1
components/menu/style/dark.less
View File

@ -20,7 +20,6 @@
&-dark &-inline&-sub {
background: @menu-dark-submenu-bg;
box-shadow: 0 2px 8px fade(@black, 45%) inset;
}
&-dark&-horizontal {

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

@ -254,6 +254,7 @@
// ---
@input-bg: transparent;
@input-placeholder-color: fade(@white, 30%);
@input-icon-color: fade(@white, 30%);
@input-number-handler-bg: transparent;
@input-number-handler-active-bg: @item-hover-bg;
@input-icon-hover-color: fade(@white, 85%);
@ -272,10 +273,6 @@
@cascader-menu-bg: @popover-background;
@cascader-menu-border-color-split: @border-color-split;
// Anchor
// ---
@anchor-bg: inherit;
// Tooltip
// ---
// Tooltip background color

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

@ -344,6 +344,7 @@
@input-padding-vertical-lg: 6px;
@input-placeholder-color: hsv(0, 0, 75%);
@input-color: @text-color;
@input-icon-color: @input-color;
@input-border-color: @border-color-base;
@input-bg: @component-background;
@input-number-hover-border-color: @input-hover-border-color;

2
components/table/index.zh-CN.md
View File

@ -121,7 +121,7 @@ const columns = [
| className | 列样式类名 | string | - |
| colSpan | 表头列合并,设置为 0 时，不渲染 | number | - |
| dataIndex | 列数据在数据项中对应的路径，支持通过数组查询嵌套路径 | string \| string\[] | - |
| defaultFilteredValue | 默认筛选值 | string\[] | - | |
| defaultFilteredValue | 默认筛选值 | string\[] | - |
| defaultSortOrder | 默认排序顺序 | 'ascend' \| 'descend' | - |
| filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | React.ReactNode \| (props: [FilterDropdownProps](https://git.io/fjP5h)) => React.ReactNode | - |
| filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - |

2
components/transfer/index.zh-CN.md
View File

@ -26,7 +26,7 @@ title: Transfer
| className | 自定义类 | string | | |
| dataSource | 数据源，其中的数据将会被渲染到左边一栏中，`targetKeys` 中指定的除外。 | [TransferItem](https://git.io/vMM64)\[] | \[] | |
| disabled | 是否禁用 | boolean | false | |
| filterOption | 接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | | (inputValue, option): boolean | | |
| filterOption | 接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | (inputValue, option): boolean | | |
| footer | 底部渲染函数 | (props) => ReactNode | | |
| listStyle | 两个穿梭框的自定义样式 | object\|({direction: 'left'\|'right'}) => object | | |
| locale | 各种语言 | { itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode; } | `{ itemUnit: '项', itemsUnit: '项', searchPlaceholder: '请输入搜索内容' }` | |

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

@ -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.

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

@ -104,13 +104,13 @@ module.exports = {
![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*mYU9R4YFxscAAAAAAAAAAABkARQnAQ)
一种方式是在样式文件全量引入 `antd/dist/antd.dark.less`：
方式一：是在样式文件全量引入 `antd/dist/antd.dark.less`：
```less
@import '~antd/dist/antd.dark.less'; // 引入官方提供的暗色 less 样式入口文件
```
另一种是用在 `webpack.config.js` 使用 [less-loader](https://github.com/webpack-contrib/less-loader) 按需引入：
方式二：是用在 `webpack.config.js` 使用 [less-loader](https://github.com/webpack-contrib/less-loader) 按需引入：
```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
```
方式三：如果项目不使用 Less，可在 CSS 文件中，全量引入 `antd.dark.css`：
```css
@import '~antd/dist/antd.dark.css';
```
## 没有生效？
注意样式必须加载 less 格式，一个常见的问题就是引入了多份样式，less 的样式被 css 的样式覆盖了。

2
docs/spec/download.en-US.md
View File

@ -7,7 +7,7 @@ title: Resources
Please find below some of the design resources and tools about Ant Design that we consider valuable. More of this is still being collected.
<div class="resource-cards">
<a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Components.3.12.0.sketch" class="resource-card">
<a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Components.4.0.Beta.sketch" class="resource-card">
<div class="resource-card-icon">
<img width="65" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*XsDPQrwQZwEAAAAAAAAAAABkARQnAQ">
</div>

2
docs/spec/download.zh-CN.md
View File

@ -9,7 +9,7 @@ title: 设计资源
- 新版本 Sketch Symbols 组件反馈地址：[🦜 反馈地址](https://www.yuque.com/kitchen/topics/51)
<div class="resource-cards">
<a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Components.3.12.0.sketch" class="resource-card">
<a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Components.4.0.Beta.sketch" class="resource-card">
<div class="resource-card-icon">
<img width="65" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*XsDPQrwQZwEAAAAAAAAAAABkARQnAQ">
</div>

8
site/theme/static/common.less
View File

@ -176,9 +176,6 @@ a {
}
#_hj_feedback_container {
> div {
left: 0;
}
.path1::before {
color: @primary-color !important;
}
@ -206,9 +203,4 @@ a {
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 9px 28px 8px rgba(0, 0, 0, 0.05);
}
.ant-row-rtl & {
right: auto;
left: 32px;
}
}

1
site/theme/static/index.less
View File

@ -24,3 +24,4 @@
@import './nprogress';
@import './contributors';
@import './dark.less';
@import './rtl.less';

11
site/theme/static/rtl.less Normal file
View File

@ -0,0 +1,11 @@
[data-direction='rtl'] {
#_hj_feedback_container {
> div {
left: 32px;
}
}
.fixed-widgets {
right: auto;
left: 32px;
}
}

2
site/theme/template/Layout/index.jsx
View File

@ -208,7 +208,7 @@ export default class Layout extends React.Component {
return (
<HelmetProvider context={helmetContext}>
<Helmet encodeSpecialCharacters={false}>
<html lang={appLocale.locale === 'zh-CN' ? 'zh' : 'en'} />
<html lang={appLocale.locale === 'zh-CN' ? 'zh' : 'en'} data-direction={direction} />
<title>{title}</title>
<link
rel="apple-touch-icon-precomposed"