diff --git a/docs/_template/light-dark-theme/partials/affix.tmpl.partial b/docs/_template/light-dark-theme/partials/affix.tmpl.partial
index ffbd27dcb..aafcdf05b 100644
--- a/docs/_template/light-dark-theme/partials/affix.tmpl.partial
+++ b/docs/_template/light-dark-theme/partials/affix.tmpl.partial
@@ -6,6 +6,7 @@
       <p>Theme</p>
       <select id="theme-switcher">
         <option value="dark">Dark</option>
+        <option value="gray">Gray</option>
         <option value="light">Light</option>
       </select>
     </div>
diff --git a/docs/_template/light-dark-theme/partials/head.tmpl.partial b/docs/_template/light-dark-theme/partials/head.tmpl.partial
index 01acec060..94670f432 100644
--- a/docs/_template/light-dark-theme/partials/head.tmpl.partial
+++ b/docs/_template/light-dark-theme/partials/head.tmpl.partial
@@ -8,14 +8,16 @@
   <meta name="title" content="{{#title}}{{title}}{{/title}}{{^title}}{{>partials/title}}{{/title}} {{#_appTitle}}| {{_appTitle}} {{/_appTitle}}">
   <meta name="generator" content="docfx {{_docfxVersion}}">
   {{#_description}}<meta name="description" content="{{_description}}">{{/_description}}
+  <link rel="preload" href="{{_rel}}styles/search-worker.js" as="script">
+  <link rel="preload" href="{{_rel}}fonts/glyphicons-halflings-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
   <link rel="shortcut icon" href="{{_rel}}{{{_appFaviconPath}}}{{^_appFaviconPath}}favicon.ico{{/_appFaviconPath}}">
-  <link rel="stylesheet" href="{{_rel}}styles/docfx.vendor.css">
+  <link rel="stylesheet" href="{{_rel}}styles/docfx.vendor.minify.css">
   <link rel="stylesheet" href="{{_rel}}styles/docfx.css">
   <link rel="stylesheet" href="{{_rel}}styles/master.css">
   <link rel="stylesheet" href="{{_rel}}styles/main.css">
   <link rel="stylesheet" href="{{_rel}}styles/theme-switcher.css">
   <link href="https://cdn.rawgit.com/noelboss/featherlight/1.7.6/release/featherlight.min.css" type="text/css" rel="stylesheet" />
-  <meta name="theme-color" content="#101010"/>
+  <meta name="theme-color" content="#99AAB5"/>
   <meta property="docfx:navrel" content="{{_navRel}}">
   <meta property="docfx:tocrel" content="{{_tocRel}}">
   <meta id="docfx-style:rel" content="{{_rel}}">
diff --git a/docs/_template/light-dark-theme/styles/dark.css b/docs/_template/light-dark-theme/styles/dark.css
index 2ea9aea29..0a021b377 100644
--- a/docs/_template/light-dark-theme/styles/dark.css
+++ b/docs/_template/light-dark-theme/styles/dark.css
@@ -77,6 +77,8 @@ article h4 {
     background-color: #333333;
 }
 
+/* toc */
+
 .toc .nav>li>a {
     color: rgb(218, 218, 218);
 }
@@ -130,22 +132,23 @@ article h4 {
     background: #616161;
 }
 
+/* alert */
 .alert-info {
     color: #d9edf7;
     background: #004458;
-    border-color: #005873
+    border-color: #005873;
 }
 
 .alert-warning {
     color: #fffaf2;
     background: #80551a;
-    border-color: #99661f
+    border-color: #99661f;
 }
 
 .alert-danger {
     color: #fff2f2;
     background: #4d0000;
-    border-color: #660000
+    border-color: #660000;
 }
 
 /* For tabbed content */
diff --git a/docs/_template/light-dark-theme/styles/docfx.vendor.minify.css b/docs/_template/light-dark-theme/styles/docfx.vendor.minify.css
new file mode 100644
index 000000000..a39bfd0d9
--- /dev/null
+++ b/docs/_template/light-dark-theme/styles/docfx.vendor.minify.css
@@ -0,0 +1,998 @@
+@font-face {
+    font-family: 'Glyphicons Halflings';
+    font-display: fallback;
+    src: url(../fonts/glyphicons-halflings-regular.eot);
+    src: url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'), url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'), url(../fonts/glyphicons-halflings-regular.woff) format('woff'), url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'), url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')
+}
+
+body {
+    margin: 0;
+}
+
+html {
+    font-family: sans-serif;
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+}
+
+article,
+footer,
+header,
+nav {
+    display: block;
+}
+
+a {
+    background-color: transparent;
+}
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+strong {
+    font-weight: 700;
+}
+
+h1 {
+    margin: .67em 0;
+}
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+pre {
+    overflow: auto;
+}
+
+code,
+pre {
+    font-size: 1em;
+}
+
+button,
+input,
+select {
+    margin: 0;
+    font: inherit;
+    color: inherit;
+}
+
+.glyphicon {
+    font-style: normal;
+}
+
+button {
+    overflow: visible;
+}
+
+button,
+select {
+    text-transform: none;
+}
+
+button {
+    -webkit-appearance: button;
+    cursor: pointer;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+
+table {
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+
+td,
+th {
+    padding: 0;
+}
+
+@media print {
+
+    pre,
+    tr {
+        page-break-inside: avoid;
+    }
+
+    *,
+    :after,
+    :before {
+        color: #000 !important;
+        text-shadow: none !important;
+        background: 0 0 !important;
+        -webkit-box-shadow: none !important;
+        box-shadow: none !important;
+    }
+
+    a,
+    a:visited {
+        text-decoration: underline;
+    }
+
+    a[href]:after {
+        content: " ("attr(href) ")";
+    }
+
+    a[href^="#"]:after {
+        content: "";
+    }
+
+    pre {
+        border: 1px solid #999;
+    }
+
+    thead {
+        display: table-header-group;
+    }
+
+    h3,
+    p {
+        orphans: 3;
+        widows: 3;
+    }
+
+    h3 {
+        page-break-after: avoid;
+    }
+
+    .navbar {
+        display: none;
+    }
+
+    .table {
+        border-collapse: collapse !important;
+    }
+
+    .table td,
+    .table th {
+        background-color: #fff !important;
+    }
+
+    .table-bordered td,
+    .table-bordered th {
+        border: 1px solid #ddd !important;
+    }
+}
+
+.btn,
+.btn:active,
+.form-control,
+.navbar-toggle {
+    background-image: none;
+}
+
+body {
+    background-color: #fff;
+}
+
+.glyphicon {
+    position: relative;
+    top: 1px;
+    display: inline-block;
+    font-family: 'Glyphicons Halflings';
+    font-weight: 400;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.glyphicon-refresh:before {
+    content: "\e031";
+}
+
+.glyphicon-filter:before {
+    content: "\e138";
+}
+
+*,
+:after,
+:before {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 10px;
+    -webkit-tap-highlight-color: transparent;
+}
+
+body {
+    font-size: 14px;
+    line-height: 1.42857143;
+    color: #333;
+}
+
+button,
+input,
+select {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+}
+
+a {
+    color: #337ab7;
+    text-decoration: none;
+}
+
+a:focus,
+a:hover {
+    color: #23527c;
+    text-decoration: underline;
+}
+
+a:focus {
+    outline: -webkit-focus-ring-color auto 5px;
+    outline-offset: -2px;
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+}
+
+h1,
+h3,
+h4,
+h5,
+h6 {
+    font-family: inherit;
+    font-weight: 500;
+    line-height: 1.1;
+    color: inherit;
+}
+
+h1,
+h3 {
+    margin-top: 20px;
+    margin-bottom: 10px;
+}
+
+h4,
+h5,
+h6 {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+h1 {
+    font-size: 36px;
+}
+
+h3 {
+    font-size: 24px;
+}
+
+h4 {
+    font-size: 18px;
+}
+
+h5 {
+    font-size: 14px;
+}
+
+h6 {
+    font-size: 12px;
+}
+
+p {
+    margin: 0 0 10px;
+}
+
+pre {
+    line-height: 1.42857143;
+}
+
+.small {
+    font-size: 85%;
+}
+
+pre code,
+table {
+    background-color: transparent;
+}
+
+ul {
+    margin-top: 0;
+}
+
+ul ul {
+    margin-bottom: 0;
+}
+
+ul {
+    margin-bottom: 10px;
+}
+
+@media (min-width:768px) {
+    .container {
+        width: 750px;
+    }
+}
+
+code {
+    padding: 2px 4px;
+    font-size: 90%;
+}
+
+th {
+    text-align: left;
+}
+
+pre {
+    display: block;
+    padding: 9.5px;
+    margin: 0 0 10px;
+    font-size: 13px;
+    word-break: break-all;
+    word-wrap: break-word;
+    color: #333;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.container {
+    margin-right: auto;
+    margin-left: auto;
+}
+
+pre code {
+    padding: 0;
+    font-size: inherit;
+    color: inherit;
+    white-space: pre-wrap;
+    border-radius: 0;
+}
+
+.container {
+    padding-right: 15px;
+    padding-left: 15px;
+}
+
+@media (min-width:992px) {
+    .container {
+        width: 970px;
+    }
+}
+
+@media (min-width:1200px) {
+    .container {
+        width: 1170px;
+    }
+}
+
+.row {
+    margin-right: -15px;
+    margin-left: -15px;
+}
+
+.col-md-10,
+.col-md-2 {
+    position: relative;
+    min-height: 1px;
+    padding-right: 15px;
+    padding-left: 15px;
+}
+
+@media (min-width:992px) {
+
+    .col-md-10,
+    .col-md-2 {
+        float: left;
+    }
+
+    .col-md-10 {
+        width: 83.33333333%;
+    }
+
+    .col-md-2 {
+        width: 16.66666667%;
+    }
+}
+
+.table {
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: 20px;
+}
+
+.table>tbody>tr>td,
+.table>thead>tr>th {
+    padding: 8px;
+    line-height: 1.42857143;
+    vertical-align: top;
+    border-top: 1px solid #ddd;
+}
+
+.table>thead>tr>th {
+    vertical-align: bottom;
+    border-bottom: 2px solid #ddd;
+}
+
+.table>thead:first-child>tr:first-child>th {
+    border-top: 0;
+}
+
+.table-condensed>tbody>tr>td,
+.table-condensed>thead>tr>th {
+    padding: 5px;
+}
+
+.table-bordered,
+.table-bordered>tbody>tr>td,
+.table-bordered>thead>tr>th {
+    border: 1px solid #ddd;
+}
+
+.table-bordered>thead>tr>th {
+    border-bottom-width: 2px;
+}
+
+.table-striped>tbody>tr:nth-of-type(odd) {
+    background-color: #f9f9f9;
+}
+
+.table-responsive {
+    min-height: .01%;
+    overflow-x: auto;
+}
+
+@media screen and (max-width:767px) {
+    .table-responsive {
+        width: 100%;
+        margin-bottom: 15px;
+        overflow-y: hidden;
+        -ms-overflow-style: -ms-autohiding-scrollbar;
+        border: 1px solid #ddd;
+    }
+
+    .table-responsive>.table {
+        margin-bottom: 0;
+    }
+
+    .table-responsive>.table>tbody>tr>td,
+    .table-responsive>.table>thead>tr>th {
+        white-space: nowrap;
+    }
+
+    .table-responsive>.table-bordered {
+        border: 0;
+    }
+
+    .table-responsive>.table-bordered>tbody>tr>td:first-child,
+    .table-responsive>.table-bordered>thead>tr>th:first-child {
+        border-left: 0;
+    }
+
+    .table-responsive>.table-bordered>tbody>tr>td:last-child,
+    .table-responsive>.table-bordered>thead>tr>th:last-child {
+        border-right: 0;
+    }
+
+    .table-responsive>.table-bordered>tbody>tr:last-child>td {
+        border-bottom: 0;
+    }
+}
+
+.form-control {
+    font-size: 14px;
+    line-height: 1.42857143;
+    color: #555;
+    display: block;
+}
+
+.form-control {
+    width: 100%;
+    height: 34px;
+    padding: 6px 12px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
+    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+
+.form-control:focus {
+    border-color: #66afe9;
+    outline: 0;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
+}
+
+.form-control::-moz-placeholder {
+    color: #999;
+    opacity: 1;
+}
+
+.form-control:-ms-input-placeholder {
+    color: #999;
+}
+
+.form-control::-webkit-input-placeholder {
+    color: #999;
+}
+
+.form-control::-ms-expand {
+    background-color: transparent;
+    border: 0;
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+.btn {
+    display: inline-block;
+    padding: 6px 12px;
+    margin-bottom: 0;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.42857143;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
+}
+
+.btn:active:focus,
+.btn:focus {
+    outline: -webkit-focus-ring-color auto 5px;
+    outline-offset: -2px;
+}
+
+.btn:focus,
+.btn:hover {
+    color: #333;
+    text-decoration: none;
+}
+
+.btn:active {
+    outline: 0;
+    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+}
+
+.collapse {
+    display: none;
+}
+
+.nav>li,
+.nav>li>a {
+    display: block;
+    position: relative;
+}
+
+.nav {
+    padding-left: 0;
+    margin-bottom: 0;
+    list-style: none;
+}
+
+.nav>li>a {
+    padding: 10px 15px;
+}
+
+.nav>li>a:focus,
+.nav>li>a:hover {
+    text-decoration: none;
+    background-color: #eee;
+}
+
+.navbar {
+    position: relative;
+    min-height: 50px;
+    margin-bottom: 20px;
+    border: 1px solid transparent;
+}
+
+.navbar-collapse {
+    padding-right: 15px;
+    padding-left: 15px;
+    overflow-x: visible;
+    -webkit-overflow-scrolling: touch;
+    border-top: 1px solid transparent;
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
+}
+
+@media (min-width:768px) {
+    .navbar {
+        border-radius: 4px;
+    }
+
+    .navbar-header {
+        float: left;
+    }
+
+    .navbar-collapse {
+        width: auto;
+        border-top: 0;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+    }
+
+    .navbar-collapse.collapse {
+        display: block !important;
+        height: auto !important;
+        padding-bottom: 0;
+        overflow: visible !important;
+    }
+}
+
+.container>.navbar-collapse,
+.container>.navbar-header {
+    margin-right: -15px;
+    margin-left: -15px;
+}
+
+.navbar-brand {
+    float: left;
+    height: 50px;
+    padding: 15px;
+    font-size: 18px;
+    line-height: 20px;
+}
+
+.navbar-brand:focus,
+.navbar-brand:hover {
+    text-decoration: none;
+}
+
+@media (min-width:768px) {
+
+    .container>.navbar-collapse,
+    .container>.navbar-header {
+        margin-right: 0;
+        margin-left: 0;
+    }
+
+    .navbar>.container .navbar-brand {
+        margin-left: -15px;
+    }
+}
+
+.navbar-toggle {
+    position: relative;
+    float: right;
+    padding: 9px 10px;
+    margin-top: 8px;
+    margin-right: 15px;
+    margin-bottom: 8px;
+    background-color: transparent;
+    border: 1px solid transparent;
+    border-radius: 4px;
+}
+
+.navbar-toggle:focus {
+    outline: 0;
+}
+
+.navbar-toggle .icon-bar {
+    display: block;
+    width: 22px;
+    height: 2px;
+    border-radius: 1px;
+}
+
+.navbar-toggle .icon-bar+.icon-bar {
+    margin-top: 4px;
+}
+
+.navbar-nav {
+    margin: 7.5px -15px;
+}
+
+.navbar-nav>li>a {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    line-height: 20px;
+}
+
+@media (min-width:768px) {
+    .navbar-toggle {
+        display: none;
+    }
+
+    .navbar-nav {
+        float: left;
+        margin: 0;
+    }
+
+    .navbar-nav>li {
+        float: left;
+    }
+
+    .navbar-nav>li>a {
+        padding-top: 15px;
+        padding-bottom: 15px;
+    }
+}
+
+.navbar-form {
+    padding: 10px 15px;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
+    margin: 8px -15px;
+}
+
+@media (min-width:768px) {
+    .navbar-form .form-group {
+        display: inline-block;
+    }
+
+    .navbar-form .form-group {
+        margin-bottom: 0;
+        vertical-align: middle;
+    }
+
+    .navbar-form .form-control {
+        display: inline-block;
+        width: auto;
+        vertical-align: middle;
+    }
+
+    .navbar-form {
+        width: auto;
+        padding-top: 0;
+        padding-bottom: 0;
+        margin-right: 0;
+        margin-left: 0;
+        border: 0;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+    }
+}
+
+.breadcrumb>li {
+    display: inline-block;
+}
+
+@media (max-width:767px) {
+    .navbar-form .form-group {
+        margin-bottom: 5px;
+    }
+
+    .navbar-form .form-group:last-child {
+        margin-bottom: 0;
+    }
+}
+
+@media (min-width:768px) {
+    .navbar-right {
+        float: right !important;
+        margin-right: -15px;
+    }
+}
+
+.navbar-default {
+    background-color: #f8f8f8;
+    border-color: #e7e7e7;
+}
+
+.navbar-inverse {
+    background-color: #222;
+    border-color: #080808;
+}
+
+.navbar-inverse .navbar-brand {
+    color: #9d9d9d;
+}
+
+.navbar-inverse .navbar-brand:focus,
+.navbar-inverse .navbar-brand:hover {
+    color: #fff;
+    background-color: transparent;
+}
+
+.navbar-inverse .navbar-nav>li>a {
+    color: #9d9d9d;
+}
+
+.navbar-inverse .navbar-nav>li>a:focus,
+.navbar-inverse .navbar-nav>li>a:hover {
+    color: #fff;
+    background-color: transparent;
+}
+
+.navbar-inverse .navbar-nav>.active>a,
+.navbar-inverse .navbar-nav>.active>a:focus,
+.navbar-inverse .navbar-nav>.active>a:hover {
+    color: #fff;
+    background-color: #080808;
+}
+
+.navbar-inverse .navbar-toggle {
+    border-color: #333;
+}
+
+.navbar-inverse .navbar-toggle:focus,
+.navbar-inverse .navbar-toggle:hover {
+    background-color: #333;
+}
+
+.navbar-inverse .navbar-toggle .icon-bar {
+    background-color: #fff;
+}
+
+.navbar-inverse .navbar-collapse,
+.navbar-inverse .navbar-form {
+    border-color: #101010;
+}
+
+.breadcrumb {
+    padding: 8px 15px;
+    margin-bottom: 20px;
+    list-style: none;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+}
+
+.breadcrumb>li+li:before {
+    padding: 0 5px;
+    color: #ccc;
+    content: "/\00a0";
+}
+
+.alert {
+    margin-bottom: 20px;
+}
+
+.alert {
+    padding: 15px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+}
+
+.alert>p {
+    margin-bottom: 0;
+}
+
+.container:after,
+.container:before,
+.nav:after,
+.nav:before,
+.navbar-collapse:after,
+.navbar-collapse:before,
+.navbar-header:after,
+.navbar-header:before,
+.navbar:after,
+.navbar:before,
+.row:after,
+.row:before {
+    display: table;
+    content: " ";
+}
+
+.container:after,
+.nav:after,
+.navbar-collapse:after,
+.navbar-header:after,
+.navbar:after,
+.row:after {
+    clear: both;
+}
+
+.pull-right {
+    float: right !important;
+}
+
+.affix {
+    position: fixed;
+}
+
+@media (max-width:767px) {
+    .hidden-xs {
+        display: none !important;
+    }
+}
+
+@media (min-width:768px) and (max-width:991px) {
+    .hidden-sm {
+        display: none !important;
+    }
+}
+
+@media print {
+    .hidden-print {
+        display: none !important;
+    }
+}
+
+.hide {
+    display: none !important;
+}
+
+.show {
+    display: block !important;
+}
+
+.pagination {
+    display: inline-block;
+}
+
+.pagination {
+    padding-left: 0;
+    margin: 20px 0;
+    border-radius: 4px;
+}
+
+.pagination>li {
+    display: inline;
+}
+
+.pagination>li>a {
+    position: relative;
+    float: left;
+    padding: 6px 12px;
+    margin-left: -1px;
+    line-height: 1.42857143;
+    color: #337ab7;
+    text-decoration: none;
+    background-color: #fff;
+    border: 1px solid #ddd;
+}
+
+.pagination>li:first-child>a {
+    margin-left: 0;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
+.pagination>li:last-child>a {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+.pagination>li>a:focus,
+.pagination>li>a:hover {
+    z-index: 2;
+    color: #23527c;
+    background-color: #eee;
+    border-color: #ddd;
+}
+
+.pagination>.active>a,
+.pagination>.active>a:focus,
+.pagination>.active>a:hover {
+    z-index: 3;
+    color: #fff;
+    cursor: default;
+    background-color: #337ab7;
+    border-color: #337ab7;
+}
+
+.pagination>.disabled>a,
+.pagination>.disabled>a:focus,
+.pagination>.disabled>a:hover {
+    color: #777;
+    cursor: not-allowed;
+    background-color: #fff;
+    border-color: #ddd;
+}
diff --git a/docs/_template/light-dark-theme/styles/gray.css b/docs/_template/light-dark-theme/styles/gray.css
new file mode 100644
index 000000000..1d914368a
--- /dev/null
+++ b/docs/_template/light-dark-theme/styles/gray.css
@@ -0,0 +1,311 @@
+/* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. See License.txt in the project root for license information. */
+
+@import url('vs2015.css');
+html,
+body {
+    background: #23272A;
+    color: #dddddd;
+}
+
+button,
+a {
+    color: #64B5F6;
+}
+
+.sidenav{
+  background-color: rgb(30, 30, 30);
+}
+
+button:hover,
+button:focus,
+a:hover,
+a:focus,
+.btn:focus,
+.btn:hover{
+    color: #2196F3;
+}
+
+a.disable,
+a.disable:hover {
+    color: #EEEEEE;
+}
+
+.divider {
+    color: #37474F;
+}
+
+hr {
+    border-color: #37474F;
+}
+
+/* top navbar */
+.navbar-inverse[role="navigation"] {
+    background-color: #2C2F33;
+}
+
+/* sub navbar (below top) */
+.subnav {
+    background: #282B2F
+}
+
+
+.inheritance h5,
+.inheritedMembers h5 {
+    border-bottom: 1px solid #37474F;
+}
+
+article h4 {
+    border-bottom: 1px solid #37474F;
+}
+
+.docs-search {
+    background: #424242;
+}
+
+.search-results-group-heading {
+    color: #424242;
+}
+
+.search-close {
+    color: #424242;
+}
+
+.sidetoc {
+    background-color: #1b1b1b;
+    border-left: 0px solid #37474F;
+    border-right: 0px solid #37474F;
+}
+
+.sideaffix {
+    overflow: visible;
+}
+
+.sideaffix>div.contribution>ul>li>a.contribution-link:hover {
+    background-color: #333333;
+}
+
+/* toc */
+
+.toc .nav>li>a {
+    color: rgb(218, 218, 218);
+}
+
+.toc .nav>li>a:hover,
+.toc .nav>li>a:focus {
+    color: #E0E0E0;
+}
+
+.toc .nav>li.active>a {
+    color: #90CAF9;
+}
+
+.toc .nav>li.active>a:hover,
+.toc .nav>li.active>a:focus {
+    background-color: #37474F;
+    color: #4FC3F7;
+}
+
+.sidefilter {
+    background-color: #1b1b1b;
+    border-left: 0px solid #37474F;
+    border-right: 0px solid #37474F;
+}
+
+.affix ul>li>a:hover {
+    background: none;
+    color: #EEEEEE;
+}
+
+.affix ul>li.active>a,
+.affix ul>li.active>a:before {
+    color: #B3E5FC;
+}
+
+.affix ul>li>a {
+    color: #EEEEEE;
+}
+
+.affix>ul>li.active>a,
+.affix>ul>li.active>a:before {
+    color: #B3E5FC;
+}
+
+.tryspan {
+    border-color: #37474F;
+}
+
+.footer {
+    border-top: 1px solid #5F5F5F;
+    background: #2C2F33;
+}
+
+/* alert */
+.alert-info {
+    color: #f3fdff;
+    background: #40788A;
+    border-color: #2F7A95;
+}
+
+.alert-warning {
+    color: #fffaf2;
+    background: #936C36;
+    border-color: #AE8443;
+}
+
+.alert-danger {
+    color: #fff4f4;
+    background: #834040;
+    border-color: #8C2F2F
+}
+
+/* For tabbed content */
+
+.tabGroup {
+    margin-top: 1rem;
+}
+
+.tabGroup ul[role="tablist"] {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.tabGroup ul[role="tablist"]>li {
+    list-style: none;
+    display: inline-block;
+}
+
+.tabGroup a[role="tab"] {
+    color: white;
+    box-sizing: border-box;
+    display: inline-block;
+    padding: 5px 7.5px;
+    text-decoration: none;
+    border-bottom: 2px solid #fff;
+}
+
+.tabGroup a[role="tab"]:hover,
+.tabGroup a[role="tab"]:focus,
+.tabGroup a[role="tab"][aria-selected="true"] {
+    border-bottom: 2px solid #607D8B;
+}
+
+.tabGroup a[role="tab"][aria-selected="true"] {
+    color: #81D4FA;
+}
+
+.tabGroup a[role="tab"]:hover,
+.tabGroup a[role="tab"]:focus {
+    color: #29B6F6;
+}
+
+.tabGroup a[role="tab"]:focus {
+    outline: 1px solid #607D8B;
+    outline-offset: -1px;
+}
+
+@media (min-width: 768px) {
+    .tabGroup a[role="tab"] {
+        padding: 5px 15px;
+    }
+}
+
+.tabGroup section[role="tabpanel"] {
+    border: 1px solid #607D8B;
+    padding: 15px;
+    margin: 0;
+    overflow: hidden;
+}
+
+.tabGroup section[role="tabpanel"]>.codeHeader,
+.tabGroup section[role="tabpanel"]>pre {
+    margin-left: -16px;
+    margin-right: -16px;
+}
+
+.tabGroup section[role="tabpanel"]> :first-child {
+    margin-top: 0;
+}
+
+.tabGroup section[role="tabpanel"]>pre:last-child {
+    display: block;
+    margin-bottom: -16px;
+}
+
+.mainContainer[dir='rtl'] main ul[role="tablist"] {
+    margin: 0;
+}
+
+/* code */
+
+code {
+    color: white;
+    background-color: #5B646B;
+    border-radius: 4px;
+    padding: 3px 7px;
+}
+
+pre {
+    background-color: #282a36;
+}
+
+/* table */
+
+.table-striped>tbody>tr:nth-of-type(odd) {
+    background-color: #333333;
+    color: #d3d3d3
+}
+
+tbody>tr {
+    background-color: #424242;
+    color: #c0c0c0
+}
+
+.table>tbody+tbody {
+    border-top: 2px solid rgb(173, 173, 173)
+}
+
+/* select */
+
+select {
+    background-color: #3b3b3b;
+    border-color: #2e2e2e;
+}
+
+/* 
+    Following code regarding collapse container are fetched 
+    or modified from the Materialize project.
+
+    The MIT License (MIT)
+    Copyright (c) 2014-2018 Materialize
+    https://github.com/Dogfalo/materialize
+*/
+
+/* all collapse container */
+.collapse-container.last-modified {
+    -webkit-box-shadow: 0 2px 2px 0 rgba(50, 50, 50, 0.64), 0 3px 1px -2px rgba(50, 50, 50, 0.62), 0 1px 5px 0 rgba(50, 50, 50, 0.7);
+    box-shadow: 0 2px 2px 0 rgba(50, 50, 50, 0.64), 0 3px 1px -2px rgba(50, 50, 50, 0.62), 0 1px 5px 0 rgba(50, 50, 50, 0.7);
+    border-top: 1px solid rgba(96, 96, 96, 0.7);
+    border-right: 1px solid rgba(96, 96, 96, 0.7);
+    border-left: 1px solid rgba(96, 96, 96, 0.7);
+}
+
+/* header */
+.collapse-container.last-modified>:nth-child(odd) {
+    background-color: #3f3f3f;
+    border-bottom: 1px solid rgba(96, 96, 96, 0.7);
+}
+
+/* body */
+.collapse-container.last-modified>:nth-child(even) {
+    border-bottom: 1px solid rgba(96, 96, 96, 0.7);
+    background-color: inherit;
+}
+
+span.arrow-d{
+    border-top: 5px solid white
+}
+
+span.arrow-r{
+    border-left: 5px solid white
+}
\ No newline at end of file
diff --git a/docs/_template/light-dark-theme/styles/light.css b/docs/_template/light-dark-theme/styles/light.css
index 875219909..061a7fae6 100644
--- a/docs/_template/light-dark-theme/styles/light.css
+++ b/docs/_template/light-dark-theme/styles/light.css
@@ -25,21 +25,21 @@ a {
 
 /* alert */
 .alert-info {
-    color: hsl(200, 70%, 30%);
-    background-color: hsl(200, 60%, 85%);
-    border-color: hsl(200, 50%, 70%);
+    color: #165e82;
+    background-color: #c1e0ef;
+    border-color: #8cbfd8;
 }
 
-.alert-danger {
-    color: hsl(0, 70%, 30%);
-    background-color: hsl(0, 60%, 85%);
-    border-color: hsl(0, 50%, 70%);
+.alert-warning {
+    color: #825e16;
+    background-color: #efe0c1;
+    border-color: #d8bf8c;
 }
 
-.alert-warning {
-    color: hsl(40, 70%, 30%);
-    background-color: hsl(40, 60%, 85%);
-    border-color: hsl(40, 50%, 70%);
+.alert-danger {
+    color: #821616;
+    background-color: #efc1c1;
+    border-color: #d88c8c;
 }
 
 /* code */
diff --git a/docs/_template/light-dark-theme/styles/master.css b/docs/_template/light-dark-theme/styles/master.css
index b8e7bbe56..4e0dffd7a 100644
--- a/docs/_template/light-dark-theme/styles/master.css
+++ b/docs/_template/light-dark-theme/styles/master.css
@@ -6,6 +6,7 @@ body {
     font-display: optional;
     height: 100%;
     font-size: 15px;
+    scroll-behavior: smooth;
 }
 
 p,
diff --git a/docs/guides/getting_started/images/intro-authorize.png b/docs/guides/getting_started/images/intro-authorize.png
new file mode 100644
index 000000000..66ca4cb04
Binary files /dev/null and b/docs/guides/getting_started/images/intro-authorize.png differ
diff --git a/docs/guides/getting_started/images/intro-bot-settings.png b/docs/guides/getting_started/images/intro-bot-settings.png
new file mode 100644
index 000000000..6ac40bfe6
Binary files /dev/null and b/docs/guides/getting_started/images/intro-bot-settings.png differ
diff --git a/docs/guides/getting_started/images/intro-oauth-settings.png b/docs/guides/getting_started/images/intro-oauth-settings.png
new file mode 100644
index 000000000..7d8c2a64a
Binary files /dev/null and b/docs/guides/getting_started/images/intro-oauth-settings.png differ
diff --git a/docs/guides/getting_started/images/intro-public-bot.png b/docs/guides/getting_started/images/intro-public-bot.png
new file mode 100644
index 000000000..da91366a6
Binary files /dev/null and b/docs/guides/getting_started/images/intro-public-bot.png differ
diff --git a/docs/guides/getting_started/images/intro-scopes-bot.png b/docs/guides/getting_started/images/intro-scopes-bot.png
new file mode 100644
index 000000000..fa17deb16
Binary files /dev/null and b/docs/guides/getting_started/images/intro-scopes-bot.png differ