fix: card, form site dark theme

components/card/demo/border-less.md

@@ -17,7 +17,7 @@ A borderless card on a gray background.
 import { Card } from 'antd';
 
 ReactDOM.render(
-  <div style={{ background: '#ECECEC', padding: '30px' }}>
+  <div className="site-card-border-less-wrapper">
     <Card title="Card title" bordered={false} style={{ width: 300 }}>
       <p>Card content</p>
       <p>Card content</p>
@@ -27,3 +27,16 @@ ReactDOM.render(
   mountNode,
 );
 ```
+
+```css
+.site-card-border-less-wrapper {
+  background: #ececec;
+  padding: 30px;
+}
+```
+
+<style>
+  [data-theme="dark"] .site-card-border-less-wrapper {
+    background: #303030;
+  }
+</style>

components/card/demo/in-column.md

@@ -17,7 +17,7 @@ Cards usually cooperate with grid column layout in overview page.
 import { Card, Col, Row } from 'antd';
 
 ReactDOM.render(
-  <div style={{ background: '#ECECEC', padding: '30px' }}>
+  <div className="site-card-wrapper">
     <Row gutter={16}>
       <Col span={8}>
         <Card title="Card title" bordered={false}>
@@ -39,3 +39,16 @@ ReactDOM.render(
   mountNode,
 );
 ```
+
+```css
+.site-card-wrapper {
+  background: #ececec;
+  padding: 30px;
+}
+```
+
+<style>
+  [data-theme="dark"] .site-card-wrapper {
+    background: #303030;
+  }
+</style>

components/checkbox/demo/check-all.md

@@ -47,7 +47,7 @@ class App extends React.Component {
   render() {
     return (
       <div>
-        <div style={{ borderBottom: '1px solid #E9E9E9' }}>
+        <div className="site-checkbox-all-wrapper">
           <Checkbox
             indeterminate={this.state.indeterminate}
             onChange={this.onCheckAllChange}
@@ -69,3 +69,9 @@ class App extends React.Component {
 
 ReactDOM.render(<App />, mountNode);
 ```
+
+```css
+.site-checkbox-all-wrapper {
+  border-bottom: 1px solid #e9e9e9;
+}
+```

components/checkbox/index.zh-CN.md

@@ -56,3 +56,9 @@ interface Option {
 | ------- | -------- | ---- |
 | blur()  | 移除焦点 |      |
 | focus() | 获取焦点 |      |
+
+<style>
+.site-checkbox-all-wrapper {
+  border-bottom: 1px solid #303030;
+}
+</style>

components/form/demo/advanced-search.md

@@ -121,10 +121,18 @@ ReactDOM.render(
 #components-form-demo-advanced-search .search-result-list {
   margin-top: 16px;
   border: 1px dashed #e9e9e9;
-  border-radius: 6px;
+  border-radius: 2px;
   background-color: #fafafa;
   min-height: 200px;
   text-align: center;
   padding-top: 80px;
 }
+[data-theme="dark"] .ant-advanced-search-form  {
+  background: rgba(255,255,255,0.04);
+  border: 1px solid #434343;
+}
+[data-theme="dark"] #components-form-demo-advanced-search .search-result-list {
+  border: 1px dashed #434343;
+  background: rgba(255,255,255,0.04);
+}
 </style>

components/form/demo/inline-login.md

@@ -36,17 +36,14 @@ const HorizontalLoginForm = () => {
         name="username"
         rules={[{ required: true, message: 'Please input your username!' }]}
       >
-        <Input
+        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
-          prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
-          placeholder="Username"
-        />
       </Form.Item>
       <Form.Item
         name="password"
         rules={[{ required: true, message: 'Please input your password!' }]}
       >
         <Input
-          prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
+          prefix={<LockOutlined className="site-form-item-icon" />}
           type="password"
           placeholder="Password"
         />

components/form/demo/normal-login.md

@@ -33,17 +33,14 @@ const NormalLoginForm = () => {
         name="username"
         rules={[{ required: true, message: 'Please input your Username!' }]}
       >
-        <Input
+        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
-          prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
-          placeholder="Username"
-        />
       </Form.Item>
       <Form.Item
         name="password"
         rules={[{ required: true, message: 'Please input your Password!' }]}
       >
         <Input
-          prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
+          prefix={<LockOutlined className="site-form-item-icon" />}
           type="password"
           placeholder="Password"
         />

components/form/index.en-US.md

@@ -327,3 +327,12 @@ const TestForm = () => {
 Online demo:
 
 [![Edit wrappedComponentRef-in-function-component](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/wrappedcomponentref-in-function-component-fj43c?fontsize=14&hidenavigation=1&theme=dark)
+
+<style>
+  .site-form-item-icon {
+    color: rgba(0, 0, 0, 0.25);
+  }
+  [data-theme="dark"] .site-form-item-icon {
+    color: rgba(255,255,255,.3);
+  }
+</style>

components/form/index.zh-CN.md

@@ -328,3 +328,12 @@ const TestForm = () => {
 在线示例：
 
 [![Edit wrappedComponentRef-in-function-component](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/wrappedcomponentref-in-function-component-fj43c?fontsize=14&hidenavigation=1&theme=dark)
+
+<style>
+  .site-form-item-icon {
+    color: rgba(0, 0, 0, 0.25);
+  }
+  [data-theme="dark"] .site-form-item-icon {
+    color: rgba(255,255,255,.3);
+  }
+</style>

components/grid/index.en-US.md

@@ -110,3 +110,10 @@ If the Ant Design grid layout component does not meet your needs, you can use th
 | xxl | `≥1600px`, could be a `span` value or an object containing above props | number\|object | - |  |
 
 The breakpoints of responsive grid follow [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)(not including `occasionally part`).
+
+<style>
+  [data-theme="dark"] #components-grid-demo-playground pre {
+    background: rgba(255,255,255,0.8);
+    color: rgba(255,255,255,.65);
+  }
+</style>

components/grid/index.zh-CN.md

@@ -112,7 +112,7 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 
 <style>
   [data-theme="dark"] #components-grid-demo-playground pre {
-    background: #1f1f1f;
+    background: rgba(255,255,255,0.08);
     color: rgba(255,255,255,.65);
   }
 </style>

components/input/demo/presuffix.md

@@ -21,7 +21,7 @@ ReactDOM.render(
   <div>
     <Input
       placeholder="Enter your username"
-      prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
+      prefix={<UserOutlined className="site-form-item-icon" />}
       suffix={
         <Tooltip title="Extra information">
           <InfoCircleOutlined style={{ color: 'rgba(0,0,0,.45)' }} />

components/steps/demo/nav.md

@@ -18,11 +18,6 @@ import { Steps } from 'antd';
 
 const { Step } = Steps;
 
-const stepStyle = {
-  marginBottom: 60,
-  boxShadow: '0px -1px 0 0 #e8e8e8 inset',
-};
-
 class Demo extends React.Component {
   state = {
     current: 0,
@@ -42,7 +37,7 @@ class Demo extends React.Component {
           size="small"
           current={current}
           onChange={this.onChange}
-          style={stepStyle}
+          className="site-navigation-steps"
         >
           <Step
             title="Step 1"
@@ -63,7 +58,12 @@ class Demo extends React.Component {
             description="This is a description."
           />
         </Steps>
-        <Steps type="navigation" current={current} onChange={this.onChange} style={stepStyle}>
+        <Steps
+          type="navigation"
+          current={current}
+          onChange={this.onChange}
+          className="site-navigation-steps"
+        >
           <Step status="finish" title="Step 1" />
           <Step status="process" title="Step 2" />
           <Step status="wait" title="Step 3" />
@@ -74,7 +74,7 @@ class Demo extends React.Component {
           size="small"
           current={current}
           onChange={this.onChange}
-          style={stepStyle}
+          className="site-navigation-steps"
         >
           <Step status="finish" title="finish 1" />
           <Step status="finish" title="finish 2" />
@@ -88,3 +88,10 @@ class Demo extends React.Component {
 
 ReactDOM.render(<Demo />, mountNode);
 ```
+
+```css
+.site-navigation-steps {
+  margin-bottom: 60px;
+  box-shadow: 0px -1px 0 0 #e8e8e8 inset;
+}
+```

components/steps/demo/step-next.md

@@ -90,7 +90,7 @@ ReactDOM.render(<App />, mountNode);
 .steps-content {
   margin-top: 16px;
   border: 1px dashed #e9e9e9;
-  border-radius: 6px;
+  border-radius: 2px;
   background-color: #fafafa;
   min-height: 200px;
   text-align: center;

components/steps/index.en-US.md

@@ -57,4 +57,8 @@ A single step in the step bar.
   background-color: rgba(255,255,255,0.04);
   color: rgba(255,255,255,0.65);
 }
+[data-theme="dark"] .site-navigation-steps {
+  border-bottom: 1px solid #303030;
+  box-shadow: none;
+}
 </style>

components/steps/index.zh-CN.md

@@ -58,4 +58,8 @@ title: Steps
   background-color: rgba(255,255,255,0.04);
   color: rgba(255,255,255,0.65);
 }
+[data-theme="dark"] .site-navigation-steps {
+  border-bottom: 1px solid #303030;
+  box-shadow: none;
+}
 </style>

site/theme/static/demo.less

@@ -89,7 +89,7 @@
 
   &-demo {
     padding: 42px 24px 50px;
-    color: rgba(0, 0, 0, 0.65);
+    color: @site-text-color;
     border-bottom: 1px solid @site-border-color-split;
   }