diff --git a/templates/style/_navbar.scss b/templates/style/_navbar.scss
index b7cb55828..81a308bcb 100644
--- a/templates/style/_navbar.scss
+++ b/templates/style/_navbar.scss
@@ -11,18 +11,27 @@ div.nav-container {
     right: 0;
     top: 0;
     position: fixed;
+    color: var(--color-navbar-standard);
 
     li {
         border-left: 1px solid var(--color-border);
     }
 
-    .pure-menu-has-children > .pure-menu-link:after {
-        font-size: 0.8em;
+    .pure-menu-has-children > .pure-menu-link {
+        background-color: var(--color-background);
+
+        &:hover {
+            background-color: var(--color-background);
+        }
+        &:after {
+            font-size: 0.8em;
+        }
     }
 
     .pure-menu-link {
         font-size: 0.8em;
         font-weight: 400;
+        color: var(--color-navbar-standard);
 
         &:hover {
             color: var(--color-standard);
@@ -77,6 +86,7 @@ div.nav-container {
         border: 1px solid var(--color-border);
         border-radius: 0 0 2px 2px;
         margin-left: -1px;
+        background-color: var(--color-background);
 
         li {
             border-left: none;
diff --git a/templates/style/_themes.scss b/templates/style/_themes.scss
index f70c8446c..b236f51ad 100644
--- a/templates/style/_themes.scss
+++ b/templates/style/_themes.scss
@@ -2,6 +2,8 @@
 html {
   --color-background-code: #f5f5f5;
   --color-background: #fff;
+  --input-color: #000;
+  --input-box-shadow-focus: 0 0 8px #078dd8;
   --color-border-light: #eaeaea;
   --color-border: #ddd;
   --color-doc-link-background: #333;
@@ -13,13 +15,82 @@ html {
   --color-menu-header-background: #e0e0e0;
   --color-navbar-standard: #777;
   --color-standard: #000;
+  --color-brand: #000;
   --color-struct: #df3600;
   --color-type: #e57300;
   --color-url: #4d76ae;
   --color-warn-background: #ffe5cc;
   --color-warn-hover: #b25900;
   --color-warn: #e57300;
+  --color-background-input: #fff;
+  --color-table-header-background: #e0e0e0;
+  --color-table-header: #000;
+  --color-search-focus: #078dd8;
+  --chart-title-color: #000;
+  --chart-grid: #ddd;
 }
 
 // To add a new theme, copy the above theme into a new `html[data-theme="name"]`
 // block below and change the colors
+
+html[data-theme="dark"] {
+  --color-background-code: #2a2a2a;
+  --color-background: #353535;
+  --input-color: #111;
+  --input-box-shadow-focus: 0 0 8px 4px #078dd8;
+  --color-border-light: #eaeaea;
+  --color-border: #4e4e4e;
+  --color-doc-link-background: #c0c0c0;
+  --color-doc-link-hover: #3061f3;
+  --color-error-hover: #be2525;
+  --color-error: #d93d3d;
+  --color-macro: #068000;
+  --color-menu-border: #cdcdcd;
+  --color-menu-header-background: #e0e0e0;
+  --color-navbar-standard: #ddd;
+  --color-standard: #c0c0c0;
+  --color-brand: #fff;
+  --color-struct: #df3600;
+  --color-type: #e57300;
+  --color-url: #d2991d;
+  --color-warn-background: #ffe5cc;
+  --color-warn-hover: #b25900;
+  --color-warn: #e57300;
+  --color-background-input: #f0f0f0;
+  --color-table-header-background: #e0e0e0;
+  --color-table-header: #000;
+  --color-search-focus: #078dd8;
+  --chart-title-color: #c0c0c0;
+  --chart-grid: #4e4e4e;
+}
+
+html[data-theme="ayu"] {
+  --color-background-code: #191f26;
+  --color-background: #0f1419;
+  --input-color: #c5c5c5;
+  --input-box-shadow-focus: 0 0 0 1px #148099,0 0 0 2px transparent;
+  --color-border-light: #eaeaea;
+  --color-border: #424c57;
+  --color-doc-link-background: #d5d5d5;
+  --color-doc-link-hover: #3061f3;
+  --color-error-hover: #be2525;
+  --color-error: #d93d3d;
+  --color-macro: #068000;
+  --color-menu-border: #cdcdcd;
+  --color-menu-header-background: #e0e0e0;
+  --color-navbar-standard: #ddd;
+  --color-standard: #c5c5c5;
+  --color-brand: #fff;
+  --color-struct: #df3600;
+  --color-type: #e57300;
+  --color-url: #39afd7;
+  --color-warn-background: #ffe5cc;
+  --color-warn-hover: #b25900;
+  --color-warn: #e57300;
+  --color-background-input: #141920;
+  --color-table-header-background: #364759;
+  --color-table-header: #eee;
+  --color-search-focus: #148099;
+  --chart-title-color: #e6e6e6;
+  --chart-grid: #5c6773;
+}
diff --git a/templates/style/base.scss b/templates/style/base.scss
index 34bf099f0..7bd020cb1 100644
--- a/templates/style/base.scss
+++ b/templates/style/base.scss
@@ -14,6 +14,7 @@ textarea,
     background-color: var(--color-background);
     box-sizing: border-box !important;
     border: 1px solid var(--color-border);
+    color: var(--color-standard);
 }
 
 .description {
@@ -24,6 +25,24 @@ body {
     padding: 0;
     margin: 0;
 
+    input, #search {
+        background-color: var(--color-background-input);
+        color: var(--input-color);
+    }
+
+    #nav-search {
+        color: var(--color-navbar-standard);
+    }
+
+    #search {
+        box-shadow: 0 0 0 1px var(--color-border), 0 0 0 1px var(--color-border);
+        transition: box-shadow 150ms ease-in-out;
+    }
+
+    #search:focus {
+        box-shadow: var(--input-box-shadow-focus);
+    }
+
     // rustdocs have 200px sidebar and
     // max-width 960px main pane
     // BUT I really want to make the website centered
@@ -38,6 +57,8 @@ body {
     // https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/
     // for an explanation)
     scroll-padding-top: $top-navbar-height;
+    background-color: var(--color-background);
+    color: var(--color-standard);
 
     // this is a super nasty override for help dialog in rustdocs
     // see #52 for details
@@ -55,6 +76,27 @@ body {
             opacity: 0.7;
         }
     }
+
+    > h1 {
+        color: var(--color-standard);
+    }
+
+    // This is used to improve charts rendering on all themes.
+    rect.highcharts-background {
+        fill: var(--color-background);
+    }
+
+    text.highcharts-title, g.highcharts-axis-labels > text {
+        fill: var(--chart-title-color) !important;
+    }
+
+    g.highcharts-legend-item > text {
+        fill: var(--chart-grid) !important;
+    }
+
+    g.highcharts-grid > path {
+        stroke: var(--chart-grid) !important;
+    }
 }
 
 html {
@@ -84,6 +126,7 @@ div.landing {
     h1.brand {
         font-size: 3em;
         margin-bottom: 10px;
+        color: var(--color-brand);
     }
 
     form.landing-search-form {
@@ -127,12 +170,18 @@ div.recent-releases-container {
 
     pre {
         white-space: pre-wrap;
+        background-color: var(--background-color);
     }
 
     .release {
         display: block;
         border-bottom: 1px solid var(--color-border);
         padding: 0.4em 1em;
+        color: var(--color-standard);
+
+        a {
+            color: var(--color-standard);
+        }
 
         @media #{$media-lg} {
             padding: 0.4em 0;
@@ -281,6 +330,10 @@ div.package-sheet-container {
     }
 }
 
+.pure-menu-list > li.pure-menu-heading {
+    color: var(--color-standard);
+}
+
 div.package-page-container {
     div.package-menu {
         padding: 0 10px;
@@ -288,7 +341,6 @@ div.package-page-container {
 
         li.pure-menu-heading {
             font-size: 1.3em;
-            color: var(--color-standard);
             font-weight: 500;
             text-align: center;
             border-bottom: 1px solid var(--color-border-light);
@@ -364,6 +416,7 @@ div.package-page-container {
         h5,
         h6 {
             font-family: $font-family-sans;
+            color: var(--color-standard) !important;
         }
 
         h1:first-child,
@@ -437,10 +490,12 @@ div.cratesfyi-package-container {
 
         .description-container {
             flex-grow: 3;
+            color: var(--color-standard);
 
             h1 {
                 margin: 0;
                 padding: 15px 14px;
+                color: var(--color-standard);
 
                 @media #{$media-sm} {
                     padding: 15px 0 0 14px;
@@ -571,6 +626,11 @@ div.search-page-search-form {
 
 .about {
     font-family: $font-family-serif;
+    color: var(--color-standard);
+
+    a {
+        color: var(--color-url);
+    }
 
     .pure-menu a:hover span {
         text-decoration: none;
@@ -580,6 +640,11 @@ div.search-page-search-form {
         margin-bottom: 10px;
     }
 
+    thead {
+        background-color: var(--color-table-header-background);
+        color: var(--color-table-header);
+    }
+
     thead tr th {
         font-family: $font-family-sans;
         font-weight: 500;
@@ -593,8 +658,9 @@ div.search-page-search-form {
         background-color: inherit;
     }
 
-    h4 {
+    h1, h2, h3, h4, h5, h6 {
         border-bottom-color: var(--color-border) !important;
+        color: var(--color-standard) !important;
     }
 }