fix: dark theme fixed

components/badge/demo/basic.md

@@ -40,9 +40,12 @@ ReactDOM.render(
 .head-example {
   width: 42px;
   height: 42px;
-  border-radius: 4px;
+  border-radius: 2px;
   background: #eee;
   display: inline-block;
   vertical-align: middle;
 }
+[data-theme="dark"] .head-example {
+  background: rgba(255,255,255,.12);
+}
 </style>

components/badge/demo/no-wrapper.md

@@ -21,18 +21,27 @@ import { Badge } from 'antd';
 ReactDOM.render(
   <div>
     <Badge count={25} />
-    <Badge
-      count={4}
-      style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }}
-    />
-    <Badge count={109} style={{ backgroundColor: '#52c41a' }} />
+    <Badge count={4} className="site-badge-count-4" />
+    <Badge className="site-badge-count-109" count={109} style={{ backgroundColor: '#52c41a' }} />
   </div>,
   mountNode,
 );
 ```
 
+```css
+.site-badge-count-4 .ant-badge-count {
+  background-color: #fff;
+  color: #999;
+  box-shadow: 0 0 0 1px #d9d9d9 inset;
+}
+```
+
 <style>
 .ant-badge-not-a-wrapper:not(.ant-badge-status) {
   margin-right: 8px;
 }
+[data-theme="dark"] .site-badge-count-4 .ant-badge-count {
+  background-color: #141414;
+  box-shadow: 0 0 0 1px #434343 inset;
+}
 </style>

components/badge/demo/title.md

@@ -34,8 +34,11 @@ ReactDOM.render(
 .head-example {
   width: 42px;
   height: 42px;
-  border-radius: 4px;
+  border-radius: 2px;
   background: #eee;
   display: inline-block;
 }
+[data-theme="dark"] .head-example {
+  background: rgba(255,255,255,.12);
+}
 </style>

components/collapse/demo/custom.md

@@ -39,16 +39,32 @@ ReactDOM.render(
     defaultActiveKey={['1']}
     expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
   >
-    <Panel header="This is panel header 1" key="1" style={customPanelStyle}>
+    <Panel header="This is panel header 1" key="1" className="site-collapse-custom-panel">
       <p>{text}</p>
     </Panel>
-    <Panel header="This is panel header 2" key="2" style={customPanelStyle}>
+    <Panel header="This is panel header 2" key="2" className="site-collapse-custom-panel">
       <p>{text}</p>
     </Panel>
-    <Panel header="This is panel header 3" key="3" style={customPanelStyle}>
+    <Panel header="This is panel header 3" key="3" className="site-collapse-custom-panel">
       <p>{text}</p>
     </Panel>
   </Collapse>,
   mountNode,
 );
 ```
+
+```css
+.site-collapse-custom-panel {
+  background: #f7f7f7;
+  border-radius: 2px;
+  margin-bottom: 24px;
+  border: 0px;
+  overflow: hidden;
+}
+```
+
+<style>
+  .site-collapse-custom-panel {
+    background: rgba(255,255,255,0.04);
+  }
+</style>

components/drawer/demo/render-in-current.md

@@ -33,18 +33,7 @@ class App extends React.Component {
 
   render() {
     return (
-      <div
-        style={{
-          height: 200,
-          overflow: 'hidden',
-          position: 'relative',
-          border: '1px solid #ebedf0',
-          borderRadius: 2,
-          padding: 48,
-          textAlign: 'center',
-          background: '#fafafa',
-        }}
-      >
+      <div className="site-drawer-render-in-current-wrapper">
         Render in this
         <div style={{ marginTop: 16 }}>
           <Button type="primary" onClick={this.showDrawer}>
@@ -69,3 +58,23 @@ class App extends React.Component {
 
 ReactDOM.render(<App />, mountNode);
 ```
+
+```css
+.site-drawer-render-in-current-wrapper {
+  height: 200px;
+  overflow: hidden;
+  position: relative;
+  border: 1px solid #ebedf0;
+  border-radius: 2px;
+  padding: 48px;
+  text-align: center;
+  background: #fafafa;
+}
+```
+
+<style>
+.site-drawer-render-in-current-wrapper {
+  background: #000;
+  border: 1px solid #303030;
+}
+</style>

components/style/themes/dark.less

@@ -223,7 +223,7 @@
 
 // Descriptions
 // ---
-@descriptions-bg: fade(@white, 4%);
+@descriptions-bg: @background-color-light;
 
 // Modal
 // ---
@@ -300,7 +300,7 @@
 
 // Table
 // --
-@table-header-bg: #1d1d1d;
+@table-header-bg: @background-color-light;
 @table-header-bg-sm: @table-header-bg;
 @table-body-sort-bg: fade(@white, 1%);
 @table-row-hover-bg: #262626;
@@ -332,7 +332,7 @@
 
 // Avatar
 // ---
-@avatar-bg: #5a5a5a;
+@avatar-bg: fade(@white, 30%);
 
 // Calendar
 // ---
@@ -353,7 +353,7 @@
 
 // Card
 // ---
-@card-actions-background: fade(@white, 4%);
+@card-actions-background: @background-color-light;
 @card-skeleton-bg: #303030;
 @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);
@@ -365,6 +365,12 @@
 // Comment
 // ---
 @comment-bg: @component-background;
+@comment-author-time-color: fade(@white, 30%);
+@comment-action-hover-color: fade(@white, 65%);
+
+// Rate
+// ---
+@rate-star-bg: fade(@white, 12%);
 
 // Switch
 // ---

site/theme/static/demo.less

@@ -19,11 +19,13 @@
     &,
     a {
       background: @component-background;
-      color: @text-color;
+      color: @site-text-color;
     }
   }
-  p {
-    color: @text-color;
+  .code-box-description {
+    p {
+      color: @site-text-color;
+    }
   }
   a.edit-button .anticon {
     color: @icon-color;
@@ -340,6 +342,17 @@
 
 [data-theme='dark'] {
   .code-box {
+    .code-box-title {
+      &,
+      a {
+        color: fade(@white, 65%);
+      }
+    }
+    .code-box-description {
+      p {
+        color: fade(@white, 65%);
+      }
+    }
     &-codepen {
       background: transparent
         url('https://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/R5sDUSunb1/OtZslpOjYXijshDERXwc.svg')