黑色主题适配

examples/components/App.tsx

@@ -93,6 +93,10 @@ export class App extends React.PureComponent {
       document.querySelector(
         `link[title=${this.state.theme.value}]`
       ).disabled = false;
+
+      if (this.state.theme.value === 'dark') {
+        document.querySelector('body').classList.add('dark');
+      }
     }
     document.addEventListener('scroll', this.handleScroll.bind(this));
   }
@@ -249,6 +253,9 @@ export class App extends React.PureComponent {
                   'themeIndex',
                   this.state.themes.indexOf(theme)
                 );
+                document
+                  .querySelector('body')
+                  .classList[theme.value === 'dark' ? 'add' : 'remove']('dark');
               }}
             />
           </div>

examples/components/Example.tsx

@@ -511,15 +511,14 @@ export const examples = [
         icon: 'fa fa-cloud',
         path: '/examples/iframe',
         component: makeSchemaRenderer(IFrameSchema)
-      }
+      },
 
-      // 放到使用中
-      // {
-      //   label: 'SDK',
-      //   icon: 'fa fa-rocket',
-      //   path: '/examples/sdk',
-      //   component: SdkTest
-      // }
+      {
+        label: 'SDK',
+        icon: 'fa fa-rocket',
+        path: '/examples/sdk',
+        component: SdkTest
+      }
 
       // {
       //   label: 'Test',

examples/components/Sdk/Test.jsx

@@ -76,7 +76,7 @@ export default class SdkTest extends React.Component {
 
   render() {
     return (
-      <div>
+      <div className="schema-wrapper">
         <TitleBar title="API 调用 集成在你的 React 应用中" />
         <div className="wrapper">
           {this.renderForm()}

examples/style.scss

@@ -4,6 +4,9 @@
 
 body {
   background-color: #fff;
+  &.dark {
+    background-color: #333538;
+  }
 }
 
 .page-play,
@@ -100,10 +103,6 @@ body {
   .dark-Layout {
     padding-top: 100px;
 
-    &::before {
-      background-color: #fff;
-    }
-
     &-header {
       height: 64px;
       box-shadow: none;
@@ -115,7 +114,6 @@ body {
         z-index: -1;
         left: 0;
         right: 0;
-        background: #fff;
         box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
       }
     }
@@ -143,7 +141,6 @@ body {
       .a-Layout-brand,
       .cxd-Layout-brand,
       .dark-Layout-brand {
-        color: #333;
         height: 64px;
         line-height: 64px;
         font-size: 24px;
@@ -154,6 +151,11 @@ body {
           color: #108cee;
         }
       }
+
+      .a-Layout-brand,
+      .cxd-Layout-brand {
+        color: #333;
+      }
     }
 
     &-headerBar {
@@ -164,7 +166,7 @@ body {
         height: 64px;
         line-height: 64px;
         font-size: 14px;
-        padding-left: 30px;
+        padding-left: 35px;
 
         > a {
           display: inline-block;
@@ -202,6 +204,29 @@ body {
       }
     }
   }
+
+  .dark-Layout {
+    &-header::before {
+      background-color: #191c22;
+    }
+    .Doc-search .dark-TextControl-input {
+      background-color: #191c22;
+    }
+
+    &-headerBar-links > a {
+      color: #eee;
+    }
+  }
+
+  .a-Layout,
+  .cxd-Layout {
+    &::before {
+      background-color: #fff;
+    }
+    &-header::before {
+      background: #fff;
+    }
+  }
 }
 
 .Doc {
@@ -461,6 +486,58 @@ body {
   }
 }
 
+.dark-Layout .Doc {
+  .Doc-headingList-item a {
+    color: #fff;
+    &:hover {
+      color: #999;
+    }
+  }
+
+  .Doc-navigation-item {
+    > a {
+      color: #ccc;
+      &:hover {
+        color: #fff;
+      }
+    }
+
+    &.is-top > a {
+      color: #eee;
+      &:hover {
+        color: #fff;
+      }
+    }
+
+    &.is-active > a,
+    &.is-active.is-top > a {
+      color: #108cee;
+    }
+  }
+
+  &-footer {
+    .Doc-navLinks--prev,
+    .Doc-navLinks--next {
+      color: #eee;
+    }
+
+    .Doc-navLinks-title {
+      color: #fff;
+    }
+  }
+
+  .Backtop {
+    color: #eee;
+    &:hover {
+      color: #108cee;
+    }
+  }
+
+  .markdown-body pre {
+    background-color: #282c34;
+  }
+}
+
 .Backtop {
   position: fixed;
   right: 40px;