Add dark theme properties (#283)

less/card.less

@@ -64,6 +64,14 @@
 
     .details {
         margin-top: @padding-base-vertical;
+
+        @media (prefers-color-scheme: dark) {
+            background-color: @dark-bg-100;
+
+            .list-group-item {
+                background-color: transparent;
+            }
+        }
     }
 
     .type {
@@ -73,4 +81,16 @@
     .deprecated {
         color: @deprecated-color;
     }
-}
+
+    @media (prefers-color-scheme: dark) {
+        color: white;
+        background-color: @dark-bg-100;
+        border-color: @dark-bg-200;
+        box-shadow: 0 0 0 1px @dark-bg-200;
+
+        :not(pre) > code {
+            color: white;
+            background: @dark-bg-200;
+        }
+    }
+}

less/custom.less

@@ -1,8 +1,11 @@
 /*
   Custimizations on top of base style.css
-
 */
 
+:root {
+  color-scheme: light dark;
+}
+
 
 /* Fixes long function names
    in sidebar which cause the category label

less/layout.less

@@ -15,6 +15,7 @@
 #open-nav {
     display: none;
 }
+
 @media screen and (min-width: 768px) {
     .open-nav {
         display: none;
@@ -29,14 +30,17 @@ html.home-page {
         transform: translateX(-@sidebar-width);
         transition: transform 100ms ease-in;
     }
+
     #open-nav:checked ~ header .navbar-left {
         transform: translateX(0);
     }
+
     @media screen and (min-width: 768px) {
         header .navbar-left {
             transform: translateX(0);
         }
     }
+
     body {
         .main-content();
         position: relative;
@@ -45,12 +49,29 @@ html.home-page {
         margin: @padding;
         // margin-top: 0;
         padding-top: @navbar-height;
+
+        @media (prefers-color-scheme: dark) {
+            background-color: @dark-bg-100;
+        }
     }
+
     main {
         background: #fff;
         border: 1px solid white;
         box-shadow: 0 0 0 1px #ccc;
         border-radius: @border-radius-base;
+
+        @media (prefers-color-scheme: dark) {
+            color: white;
+            background-color: @dark-bg-100;
+            border-color: @dark-bg-200;
+            box-shadow: 0 0 0 1px @dark-bg-200;
+
+            :not(pre) > code {
+                color: white;
+                background-color: @dark-bg-200;
+            }
+        }
     }
 }
 
@@ -65,31 +86,45 @@ html.docs-page {
     header .navbar-left {
         transform: translateX(-@sidebar-width);
     }
+
     header .navbar-left,
     aside, main {
         transition: transform 100ms ease-in;
     }
+
     aside {
         position: fixed;
         left: 0;
         top: @navbar-height * 5; // (1x navbar-height + 4x menu item)
         bottom: 0;
         width: @sidebar-width;
         transform: translateX(-@sidebar-width);
+
+        @media (prefers-color-scheme: dark) {
+            color: white;
+            background-color: @dark-bg-100;
+        }
     }
+
     main {
         .main-content();
         min-width: 320px;
     }
+
     body {
         background: #eee;
-         overflow-x: hidden; /* 1 */
+        overflow-x: hidden; /* 1 */
+
+         @media (prefers-color-scheme: dark) {
+            background-color: @dark-bg-100;
+        }
     }
 
     #open-nav:checked ~ header .navbar-left,
     #open-nav:checked ~ aside {
         transform: translateX(0);
     }
+
     #open-nav:checked ~ main {
         transform: translateX(@sidebar-width);
     }
@@ -98,15 +133,18 @@ html.docs-page {
         aside {
             top: @navbar-height;
         }
+
         aside,
         #open-nav:checked ~ aside {
             position: fixed;
             transform: translateX(0);
         }
+
         header .navbar-left,
         #open-nav:checked ~ header .navbar-left {
             transform: translateX(0);
         }
+
         main,
         #open-nav:checked ~ main {
             transform: translateX(0);
@@ -118,21 +156,27 @@ html.docs-page {
         .card {
             margin: 0;
         }
+
         aside {
             display: none;
         }
+
         a[title="View source on GitHub"] {
             display: none;
         }
+
         .try-repl {
             display: none;
         }
+
         h2 {
             font-size: 20px;
         }
+
         .params a {
             display: none;
         }
+
         .card div code {
             padding: 0;
         }

less/sidebar.less

@@ -40,7 +40,16 @@
 
             &:hover {
                 background: #e4e4e4;
+
+                @media (prefers-color-scheme: dark) {
+                    background-color: @dark-bg-200;
+                }
             }
         }
+
+        @media (prefers-color-scheme: dark) {
+            background-color: @dark-bg-100;
+            border-top-color: @dark-bg-200;
+        }
     }
 }

less/variables.less

@@ -16,4 +16,7 @@
 
 @deprecated-color: #E74C3C;
 
+@dark-bg-100: #282a36;
+@dark-bg-200: #44475a;
+
 @grid-float-breakpoint: 0;