fix: demo style

components/calendar/demo/card.md

@@ -21,9 +21,23 @@ function onPanelChange(value, mode) {
 }
 
 ReactDOM.render(
-  <div style={{ width: 300, border: '1px solid #f0f0f0', borderRadius: 4 }}>
+  <div className="site-calendar-demo-card">
     <Calendar fullscreen={false} onPanelChange={onPanelChange} />
   </div>,
   mountNode,
 );
 ```
+
+```css
+.site-calendar-demo-card {
+  width: 300px;
+  border: 1px solid #f0f0f0;
+  border-radius: 4px;
+}
+```
+
+<style>
+  [data-theme="dark"] .site-calendar-demo-card {
+    border: 1px solid #303030;
+  }
+</style>

components/form/demo/advanced-search.md

@@ -102,7 +102,7 @@ ReactDOM.render(
   padding: 24px;
   background: #fbfbfb;
   border: 1px solid #d9d9d9;
-  border-radius: 6px;
+  border-radius: 2px;
 }
 
 .ant-advanced-search-form .ant-form-item {
@@ -130,6 +130,8 @@ ReactDOM.render(
 [data-theme="dark"] .ant-advanced-search-form  {
   background: rgba(255,255,255,0.04);
   border: 1px solid #434343;
+  padding: 24px;
+  border-radius: 2px;
 }
 [data-theme="dark"] #components-form-demo-advanced-search .search-result-list {
   border: 1px dashed #434343;

components/spin/demo/inside.md

@@ -34,3 +34,9 @@ ReactDOM.render(
   margin: 20px 0;
 }
 ```
+
+<style>
+  .example {
+    background: rgba(255,255,255,0.08);
+  }
+</style>

components/statistic/demo/card.md

@@ -18,7 +18,7 @@ import { Statistic, Card, Row, Col } from 'antd';
 import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
-  <div style={{ background: '#ECECEC', padding: '30px' }}>
+  <div className="site-statistic-demo-card">
     <Row gutter={16}>
       <Col span={12}>
         <Card>
@@ -49,3 +49,16 @@ ReactDOM.render(
   mountNode,
 );
 ```
+
+```css
+.site-statistic-demo-card {
+  background: #ececec;
+  padding: 30px;
+}
+```
+
+<style>
+  [data-theme="dark"] .site-statistic-demo-card {
+    background: #303030;
+  }
+</style>

components/tabs/demo/card-top.md

@@ -74,4 +74,17 @@ ReactDOM.render(
   overflow: hidden;
   padding: 24px;
 }
+[data-theme="dark"] #components-tabs-demo-card-top .code-box-demo {
+  background: #000;
+}
+[data-theme="dark"] .card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
+  background: #141414;
+}
+[data-theme="dark"] .card-container > .ant-tabs-card > .ant-tabs-bar {
+  border-color: #141414;
+}
+[data-theme="dark"] .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
+  border-color: #303030;
+  background: #141414;
+}
 </style>

components/tabs/demo/custom-tab-bar.md

@@ -22,7 +22,7 @@ const { TabPane } = Tabs;
 const renderTabBar = (props, DefaultTabBar) => (
   <Sticky bottomOffset={80}>
     {({ style }) => (
-      <DefaultTabBar {...props} style={{ ...style, zIndex: 1, background: '#fff' }} />
+      <DefaultTabBar {...props} className="site-custom-tab-bar" style={{ ...style }} />
     )}
   </Sticky>
 );
@@ -44,3 +44,16 @@ ReactDOM.render(
   mountNode,
 );
 ```
+
+```css
+.site-custom-tab-bar {
+  z-index: 1;
+  background: #fff;
+}
+```
+
+<style>
+  [data-theme="dark"] .site-custom-tab-bar {
+    background: #141414;
+  }
+</style>

components/tag/demo/control.md

@@ -86,7 +86,7 @@ class EditableTagGroup extends React.Component {
           />
         )}
         {!inputVisible && (
-          <Tag onClick={this.showInput} style={{ background: '#fff', borderStyle: 'dashed' }}>
+          <Tag className="site-tag-plus" onClick={this.showInput}>
             <PlusOutlined /> New Tag
           </Tag>
         )}
@@ -97,3 +97,17 @@ class EditableTagGroup extends React.Component {
 
 ReactDOM.render(<EditableTagGroup />, mountNode);
 ```
+
+```css
+.site-tag-plus {
+  background: #fff;
+  border-style: dashed;
+}
+```
+
+<style>
+  [data-theme="dark"] .site-tag-plus {
+    background: transparent;
+    border-style: dashed;
+  }
+</style>

components/tree/demo/search.md

@@ -116,7 +116,7 @@ class SearchTree extends React.Component {
           index > -1 ? (
             <span>
               {beforeStr}
-              <span style={{ color: '#f50' }}>{searchValue}</span>
+              <span className="site-tree-search-value">{searchValue}</span>
               {afterStr}
             </span>
           ) : (
@@ -147,3 +147,15 @@ class SearchTree extends React.Component {
 
 ReactDOM.render(<SearchTree />, mountNode);
 ```
+
+```css
+.site-tree-search-value {
+  color: #f50;
+}
+```
+
+<style>
+[data-theme="dark"] .site-tree-search-value {
+  color: #d84a1b;
+}
+</style>

site/theme/static/highlight.less

@@ -68,18 +68,11 @@ pre[class*='language-'] {
   overflow: auto;
 }
 
-:not(pre) > code[class*='language-'],
+[data-theme='dark'] :not(pre) > code[class*='language-'],
 pre[class*='language-'] {
   background: @component-background;
 }
 
-[data-theme='dark'] {
-  :not(pre) > code[class*='language-'],
-  pre[class*='language-'] {
-    background: #f2f4f5;
-  }
-}
-
 /* Inline code */
 :not(pre) > code[class*='language-'] {
   padding: 0.1em;

site/theme/static/markdown.less

@@ -124,6 +124,14 @@
   border: none;
 }
 
+[data-theme='dark'] .markdown {
+  code,
+  pre,
+  pre code {
+    background: #141414;
+  }
+}
+
 .markdown strong,
 .markdown b {
   font-weight: 500;