docs: give the dark scheme the home page's ink colors

Switching the palette toggle to dark brought back Material's indigo
header and grey pages. The dark scheme now uses the same layout in the
home page's ink tones: #16182a background and header, warm light text,
a lighter indigo for links and a darker footer.

Author: shenxianpeng

docs/stylesheets/extra.css

@@ -96,7 +96,6 @@
 
 /*
  * Light scheme: the paper, ink and light header of the home page.
- * The dark scheme keeps Material's colors.
  */
 [data-md-color-scheme="default"] {
     --md-default-fg-color: #171a2ede;
@@ -160,3 +159,75 @@
         color: #454a63;
     }
 }
+
+/* Dark scheme: the same layout in the ink tones of the home page */
+[data-md-color-scheme="slate"] {
+    --md-default-fg-color: #ece9e1d6;
+    --md-default-fg-color--light: #ece9e194;
+    --md-default-fg-color--lighter: #ece9e152;
+    --md-default-fg-color--lightest: #ece9e11f;
+    --md-default-bg-color: #16182a;
+    --md-default-bg-color--light: #16182a8a;
+    --md-default-bg-color--lighter: #16182a42;
+    --md-default-bg-color--lightest: #16182a12;
+    --md-code-bg-color: #1f2237;
+    --md-code-bg-color--light: #1f2237e6;
+    --md-code-bg-color--lighter: #1f22378a;
+    --md-typeset-kbd-border-color: #16182a;
+    --md-footer-bg-color: #10121f;
+    --md-footer-bg-color--dark: #0b0d17;
+}
+
+[data-md-color-scheme="slate"][data-md-color-primary="indigo"] {
+    --md-typeset-a-color: #8e9cf5;
+}
+
+[data-md-color-scheme="slate"] .md-header,
+[data-md-color-scheme="slate"] .md-tabs {
+    background-color: #16182a;
+    color: #ece9e1;
+}
+
+[data-md-color-scheme="slate"] .md-header {
+    border-bottom: 1px solid #2b2e45;
+}
+
+[data-md-color-scheme="slate"] .md-tabs__link {
+    color: #b3b6c9;
+    opacity: 1;
+}
+
+[data-md-color-scheme="slate"] .md-tabs__item--active .md-tabs__link,
+[data-md-color-scheme="slate"] .md-tabs__link:hover {
+    color: #fff;
+}
+
+[data-md-color-scheme="slate"] .md-tabs__item--active .md-tabs__link {
+    font-weight: 700;
+}
+
+[data-md-color-scheme="slate"] .md-nav--primary .md-nav__title[for="__drawer"] {
+    background-color: #16182a;
+    color: #ece9e1;
+}
+
+[data-md-color-scheme="slate"] .md-nav__source {
+    background-color: #10121f;
+}
+
+@media screen and (min-width: 60em) {
+    [data-md-color-scheme="slate"] .md-search__form,
+    [data-md-color-scheme="slate"] .md-search__form:hover {
+        background-color: #1f2237;
+        border: 1px solid #2b2e45;
+        border-radius: 0.4rem;
+    }
+
+    [data-md-color-scheme="slate"] .md-search__input::placeholder {
+        color: #9b9eb3;
+    }
+
+    [data-md-color-scheme="slate"] .md-search__input + .md-search__icon {
+        color: #b3b6c9;
+    }
+}