Respect @media (prefers-color-scheme: dark) by adding a "dark theme"

app/components/api-token-row.module.scss

@@ -11,6 +11,9 @@
 
 .create-token {
     background-color: $main-bg-dark;
+    @media only screen and (prefers-color-scheme: dark) {
+        background-color: inherit;
+    }
 
     .name {
         padding-right: 20px;

app/components/crate-row.module.scss

@@ -12,6 +12,9 @@
 
 .name {
     color: $main-color;
+    @media only screen and (prefers-color-scheme: dark) {
+        color: #eee;
+    }
     font-weight: bold;
     text-decoration: none;
     font-size: 120%;
@@ -24,12 +27,18 @@
 .description {
     margin-top: 8px;
     color: $main-color-light;
+    @media only screen and (prefers-color-scheme: dark) {
+        color: #bbb;
+    }
     font-size: 80%;
 }
 
 .stats {
     width: 25%;
     color: $main-color-light;
+    @media only screen and (prefers-color-scheme: dark) {
+        color: #bbb;
+    }
 }
 
 .downloads {

app/components/crate-toml-copy.module.scss

@@ -1,10 +1,20 @@
 .crate-toml-copy {
     button, button:active {
         background-color: #FFFFFF;
+        @media only screen and (prefers-color-scheme: dark) {
+            background-color: #111;
+            color: #eee;
+        }
         border: none;
         cursor: pointer;
         position: relative;
     }
+    button:hover {
+        @media only screen and (prefers-color-scheme: dark) {
+            background: #090909;
+            color: #eee;
+        }
+    }
 
     .copy-notification {
         font-size: 70%;

app/components/flash-message.module.scss

@@ -3,6 +3,9 @@
     font-weight: bold;
     font-size: 110%;
     background-color: rgb(255, 213, 213);
+    @media only screen and (prefers-color-scheme: dark) {
+        background-color: #664545;
+    }
     border: 2px solid rgb(228, 136, 136);
     text-align: center;
     margin: 0 0 10px 0;

app/components/pagination.module.scss

@@ -11,11 +11,27 @@
 
     a {
         color: $main-color-light;
+        @media only screen and (prefers-color-scheme: dark) {
+            color: #bbb;
+            background-color: #111;
+        }
         text-decoration: none;
         padding: 5px 6px;
     }
-    a:hover { background-color: $main-bg-dark; }
-    a:global(.active) { background-color: $main-bg-dark; }
+
+    a:hover {
+        background-color: $main-bg-dark;
+        @media only screen and (prefers-color-scheme: dark) {
+            background-color: #111;
+            font-weight: bolder;
+        }
+    }
+    a:global(.active) {
+        background-color: $main-bg-dark;
+        @media only screen and (prefers-color-scheme: dark) {
+            background-color: #111;
+        }
+    }
 
     img, svg { vertical-align: middle; }
 
@@ -25,4 +41,11 @@
     .prev:hover {
         background: none;
     }
+
+    @media only screen and (prefers-color-scheme: dark) {
+        svg:hover {
+            filter: invert(100%)
+                    drop-shadow(0 0 0.5rem rgba(255, 255, 255, 0.1875));
+        }
+    }
 }

app/components/results-count.module.scss

@@ -1,9 +1,15 @@
 .results-count {
     color: $main-color-light;
+    @media only screen and (prefers-color-scheme: dark) {
+        color: #bbb;
+    }
     font-size: 80%;
 }
 
 .highlight {
     color: $main-color;
+    @media only screen and (prefers-color-scheme: dark) {
+        color: #eee;
+    }
     font-weight: bold;
 }

app/styles/_buttons.scss

@@ -36,11 +36,18 @@
     &[disabled] {
         @include vertical-gradient($start_light, $end_light);
         color: $main-color-light;
+        @media only screen and (prefers-color-scheme: dark) {
+            color: #bbb;
+        }
     }
 }
 
 .yellow-button {
     @include button(#fede9e, #fdc452);
+    @media only screen and (prefers-color-scheme: dark) {
+        @include button(#333, #222);
+        color: #eee;
+    }
     vertical-align: middle;
 }
 

app/styles/app.scss

@@ -17,10 +17,16 @@ $link-color: rgb(0, 172, 91);
 
 span.small {
     color: $main-color-light;
+    @media only screen and (prefers-color-scheme: dark) {
+        color: #bbb;
+    }
     font-size: 80%;
     .num {
         font-weight: bold;
         color: $main-color;
+        @media only screen and (prefers-color-scheme: dark) {
+            color: #eee;
+        }
     }
 }
 
@@ -36,9 +42,17 @@ a {
 }
 .small a {
     color: $main-color-light;
+    @media only screen and (prefers-color-scheme: dark) {
+        color: #bbb;
+    }
     text-decoration: underline;
     font-weight: normal;
-    &:hover { color: darken($main-color-light, 10%); }
+    &:hover {
+        color: darken($main-color-light, 10%);
+        @media only screen and (prefers-color-scheme: dark) {
+            color: #9b9b9b;
+        }
+    }
 }
 
 pre {
@@ -60,6 +74,11 @@ ul.dropdown {
     padding: 0;
     background: white;
     border: 1px solid $gray-border;
+    @media only screen and (prefers-color-scheme: dark) {
+        border: 1px solid #666;
+        background-color: #222;
+        color: #eee;
+    }
     list-style: none;
     z-index: 10;
     overflow: hidden;
@@ -72,6 +91,9 @@ ul.dropdown {
         padding: 8px 10px;
         text-decoration: none;
         color: $main-color !important;
+        @media only screen and (prefers-color-scheme: dark) {
+            color: #eee !important;
+        }
 
         &:hover {
             background: lighten($main-color, 15%);
@@ -103,9 +125,11 @@ h1 {
 
 .arrow-in-list svg {
     background: #fff;
+    @media only screen and (prefers-color-scheme: dark) {
+        background: #111;
+    }
 }
 
 a.arrow svg {
     background: #EEECDD;
 }
-

app/styles/application.module.scss

@@ -5,6 +5,9 @@
 html {
     background: url('/assets/noise.png');
     background-color: $html-bg;
+    @media only screen and (prefers-color-scheme: dark) {
+        background-color: #222;
+    }
 }
 
 html, body {
@@ -25,6 +28,12 @@ abbr[title] {
     border-bottom: 1px dotted;
 }
 
+@media only screen and (prefers-color-scheme: dark) {
+    nav svg {
+        filter: invert(100%);
+    }
+}
+
 noscript {
     color: white;
     padding: 10px 0;
@@ -75,6 +84,11 @@ input.search {
     background-size: 14px 15px;
     border-radius: 15px;
     box-shadow: none;
+
+    @media only screen and (prefers-color-scheme: dark) {
+        background-color: #111;
+        color: #eee;
+    }
 }
 
 .mobile-search {
@@ -90,6 +104,11 @@ input.search {
     @media only screen and (max-width: 820px) {
         display: block;
     }
+
+    @media only screen and (prefers-color-scheme: dark) {
+        background-color: #111;
+        color: #eee;
+    }
 }
 
 .search-label {
@@ -104,6 +123,9 @@ input.search {
 .sep {
     margin: 0 10px;
     color: darken($html-bg, 10%);
+    @media only screen and (prefers-color-scheme: dark) {
+        color: #666;
+    }
 }
 
 .doc-links {
@@ -135,6 +157,9 @@ input.search {
     left: auto;
     right: 0;
     min-width: 200px;
+    @media only screen and (prefers-color-scheme: dark) {
+        color: #eee;
+    }
 }
 
 .dropdown-button {
@@ -158,6 +183,13 @@ input.search {
     box-shadow: 0px 0px 5px 2px #3b6837;
     border: 5px solid #62865f;
     color: $main-color;
+
+    @media only screen and (prefers-color-scheme: dark) {
+        box-shadow: none;
+        border: none;
+        background-color: #111;
+        color: #eee;
+    }
 }
 
 .after-main-links {
@@ -168,7 +200,12 @@ input.search {
 
     @media only screen and (max-width: 450px) {
         margin: 20px;
-        .sep { display: none; }
+        .sep {
+            display: none;
+            @media only screen and (prefers-color-scheme: dark) {
+                color: #666;
+            }
+        }
         display: flex;
         flex-direction: column;
 

app/styles/catch-all.module.scss

@@ -6,4 +6,9 @@
 .search-field {
     width: 100%;
     padding: 5px;
+    @media only screen and (prefers-color-scheme: dark) {
+        background-color: #222;
+        color: #eee;
+        border-color: #666;
+    }
 }