Add templates theming to docs.rs

Author: GuillaumeGomez

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;

templates/style/_themes.scss

@@ -19,7 +19,54 @@ html {
   --color-warn-background: #ffe5cc;
   --color-warn-hover: #b25900;
   --color-warn: #e57300;
+  --color-background-input: #fff;
 }
 
 // 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;
+  --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-struct: #df3600;
+  --color-type: #e57300;
+  --color-url: #d2991d;
+  --color-warn-background: #ffe5cc;
+  --color-warn-hover: #b25900;
+  --color-warn: #e57300;
+  --color-background-input: #f0f0f0;
+}
+
+html[data-theme="ayu"] {
+  --color-background-code: #191f26;
+  --color-background: #0f1419;
+  --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-struct: #df3600;
+  --color-type: #e57300;
+  --color-url: #39afd7;
+  --color-warn-background: #ffe5cc;
+  --color-warn-hover: #b25900;
+  --color-warn: #e57300;
+  --color-background-input: #141920;
+}

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,14 @@ body {
     padding: 0;
     margin: 0;
 
+    input, #search {
+        background-color: var(--color-background-input);
+    }
+
+    #search {
+        box-shadow: 0 0 0 1px var(--color-border), 0 0 0 2px transparent;
+    }
+
     // rustdocs have 200px sidebar and
     // max-width 960px main pane
     // BUT I really want to make the website centered
@@ -38,6 +47,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 +66,10 @@ body {
             opacity: 0.7;
         }
     }
+
+    > h1 {
+        color: var(--color-standard);
+    }
 }
 
 html {
@@ -84,6 +99,7 @@ div.landing {
     h1.brand {
         font-size: 3em;
         margin-bottom: 10px;
+        color: var(--color-standard);
     }
 
     form.landing-search-form {
@@ -133,6 +149,11 @@ div.recent-releases-container {
         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,14 +302,17 @@ 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;
         margin-bottom: 50px;
 
         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 +388,7 @@ div.package-page-container {
         h5,
         h6 {
             font-family: $font-family-sans;
+            color: var(--color-standard) !important;
         }
 
         h1:first-child,
@@ -437,10 +462,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 +598,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;
@@ -593,8 +625,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;
     }
 }