Add support for Dark Mode styles

Makes use of the user's prefers-color-scheme value. A nice side effect
is that by using CSS vars, it's possible to customize the themes of the
gem as well.

Fixes #104

Author: brettchalupa

README.md

@@ -127,6 +127,81 @@ In your ERB layouts, there are several helper methods you can use. The helper me
 
 To call these methods within templates, you must use the dot notation, such as `<%= slugify.(text) %>`.
 
+## Dark Mode Support
+
+GraphQLDocs includes built-in dark mode support that automatically adapts to the user's system preferences using the `prefers-color-scheme` media query. When a user has dark mode enabled on their operating system, the documentation will automatically display with a dark theme.
+
+### Customizing Colors
+
+The default styles use CSS custom properties (variables) for all colors, making it easy to customize the color scheme to match your brand. You can override these variables by providing a custom stylesheet.
+
+The available CSS variables are:
+
+**Light Mode (default):**
+```css
+:root {
+  --bg-primary: #fff;           /* Main background color */
+  --bg-secondary: #f8f8f8;      /* Secondary background (tables, etc.) */
+  --bg-tertiary: #fafafa;       /* Tertiary background (API boxes) */
+  --bg-code: #eee;              /* Inline code background */
+  --bg-code-block: #272822;     /* Code block background */
+  --text-primary: #444;         /* Primary text color */
+  --text-secondary: #999;       /* Secondary text (categories, etc.) */
+  --text-link: #de4f4f;         /* Link color */
+  --text-code: #525252;         /* Inline code text color */
+  --border-color: #eee;         /* Primary border color */
+  --border-color-secondary: #ddd; /* Secondary border color */
+  --shadow-color: rgba(0, 0, 0, 0.1); /* Shadow/hover effects */
+}
+```
+
+**Dark Mode:**
+```css
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-primary: #1a1a1a;
+    --bg-secondary: #252525;
+    --bg-tertiary: #2a2a2a;
+    --bg-code: #333;
+    --bg-code-block: #1e1e1e;
+    --text-primary: #e0e0e0;
+    --text-secondary: #888;
+    --text-link: #ff6b6b;
+    --text-code: #d4d4d4;
+    --border-color: #333;
+    --border-color-secondary: #444;
+    --shadow-color: rgba(255, 255, 255, 0.1);
+  }
+}
+```
+
+### Example: Custom Color Scheme
+
+To customize the colors, create a custom CSS file and load it after the default styles. You can override specific variables while keeping the rest of the defaults:
+
+```css
+/* custom-theme.css */
+:root {
+  --text-link: #0066cc;         /* Change link color to blue */
+  --bg-tertiary: #f0f0f0;       /* Lighter API boxes */
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text-link: #66b3ff;       /* Lighter blue for dark mode */
+    --bg-primary: #0d1117;      /* GitHub-like dark background */
+    --bg-secondary: #161b22;
+  }
+}
+```
+
+Then reference it in your custom template by overriding the `default` template and adding a link to your stylesheet:
+
+```html
+<link rel="stylesheet" href="<%= base_url %>/assets/style.css">
+<link rel="stylesheet" href="<%= base_url %>/assets/custom-theme.css">
+```
+
 ## Configuration
 
 The following options are available:

lib/graphql-docs/layouts/assets/_sass/_api-box.scss

@@ -1,5 +1,5 @@
 .api {
-  background: #fafafa;
+  background: var(--bg-tertiary);
   h3 {
     padding: 5px 10px;
   }
@@ -32,7 +32,7 @@
       margin-left: 15px;
       font-size: 0.9em;
       font-weight: 200;
-      color: #000;
+      color: var(--text-primary);
     }
   }
   dd {

lib/graphql-docs/layouts/assets/_sass/_content.scss

@@ -22,7 +22,7 @@
     font-size: 1.5em;
     margin-top: 30px;
     padding-bottom: 10px;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--border-color);
     position: relative;
     .anchor {
       opacity: 0;
@@ -95,7 +95,7 @@
     line-height: 1.4em;
   }
   a {
-    color: #de4f4f;
+    color: var(--text-link);
   }
   img {
     max-width: 100%;
@@ -105,12 +105,13 @@
     font-size: 0.8em;
     line-height: 1.6em;
     padding: 1px 4px;
-    background-color: #eee;
+    background-color: var(--bg-code);
+    color: var(--text-code);
     margin: 0 2px;
   }
   blockquote {
     padding-left: 1.3em;
-    border-left: #eee solid 0.2em;
+    border-left: var(--border-color) solid 0.2em;
     font-style: italic;
   }
   blockquote.warning {
@@ -174,7 +175,7 @@
       margin: 0;
     }
     code {
-      background-color: #272822;
+      background-color: var(--bg-code-block);
       padding: 0;
       margin: 0;
     }
@@ -453,20 +454,20 @@
     width: 100%;
     margin: 20px 0;
     tr {
-      border-top: 1px solid #eee;
+      border-top: 1px solid var(--border-color);
       &:nth-child(2n) {
-        background-color: #f8f8f8;
+        background-color: var(--bg-secondary);
       }
     }
     th {
       font-family: 'ProximaNova-Semibold';
       padding: 12px 13px;
-      border: 1px solid #eee;
+      border: 1px solid var(--border-color);
       vertical-align: middle;
       text-align: left;
     }
     td {
-      border: 1px solid #eee;
+      border: 1px solid var(--border-color);
       vertical-align: middle;
       padding: 6px 13px;
       font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
@@ -477,7 +478,7 @@
   .bottom-nav {
     height: 44px;
     margin: 30px 0 25px;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--border-color);
     padding-bottom: 25px;
     a {
       font-family: 'ProximaNova-Semibold';

lib/graphql-docs/layouts/assets/_sass/_deprecations.scss

@@ -7,3 +7,10 @@
     font-weight: bold;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  .deprecation-notice {
+    background: #3d1a0f;
+    color: #ffb499;
+  }
+}

lib/graphql-docs/layouts/assets/_sass/_header.scss

@@ -6,6 +6,12 @@
     text-decoration: none;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  #top-nav {
+    background-color: #0a0a0a;
+  }
+}
 #top-nav-links {
   list-style-type: none;
   position: absolute;
@@ -28,8 +34,8 @@
 #site-nav {
   position: relative;
   height: 70px;
-  background-color: #fff;
-  border-bottom: 1px solid #eee;
+  background-color: var(--bg-primary);
+  border-bottom: 1px solid var(--border-color);
   padding: 14px 30px;
   a {
     vertical-align: bottom;

lib/graphql-docs/layouts/assets/_sass/_mobile.scss

@@ -5,9 +5,9 @@
   left: 0;
   width: 100%;
   height: 40px;
-  background-color: #fff;
+  background-color: var(--bg-primary);
   display: none;
-  box-shadow: 0 0 4px rgba(0,0,0,0.25);
+  box-shadow: 0 0 4px var(--shadow-color);
   .menu-button {
     position: absolute;
     width: 24px;
@@ -30,6 +30,13 @@
     }
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  #mobile-header .menu-button {
+    filter: brightness(0) invert(1);
+  }
+}
+
 #mobile-shade {
   z-index: 1;
   display: none;
@@ -84,7 +91,7 @@
     left: 0;
     padding-top: 60px;
     border-right: none;
-    box-shadow: 0 0 4px rgba(0,0,0,0.25);
+    box-shadow: 0 0 4px var(--shadow-color);
     transition: transform 0.3s ease;
     transform: translate3d(-120%, 0, 0);
     display: block;

lib/graphql-docs/layouts/assets/_sass/_search.scss

@@ -1,34 +1,56 @@
 .search-box {
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: 18px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 20px;
+    height: 20px;
+    background: url("../assets/images/search.png") center no-repeat;
+    background-size: 20px;
+    pointer-events: none;
+    z-index: 1;
+  }
+
   input {
     width: 200px;
-    background-color: #fff;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
     outline: none;
     font-family: 'ProximaNova-Regular';
     font-size: 14px;
     padding: 7px 12px 6px 32px;
     border-radius: 20px;
-    border: 1px solid #ddd;
-    background: url("../assets/images/search.png") 8px 6px no-repeat;
-    background-size: 20px;
+    border: 1px solid var(--border-color-secondary);
     transition: border-color 0.25s ease;
     &:focus {
-      border-color: #de4f4f;
+      border-color: var(--text-link);
     }
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  .search-box::before {
+    filter: brightness(0) invert(1);
+  }
+}
 .search-box.st-default-search-input {
   width: 200px;
-  background-color: #fff;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
   outline: none;
   font-family: 'ProximaNova-Regular';
   font-size: 14px;
   padding: 7px 12px 6px 32px;
   border-radius: 20px;
-  border: 1px solid #ddd;
+  border: 1px solid var(--border-color-secondary);
   background: url("../assets/images/search.png") 8px 6px no-repeat;
   background-size: 20px;
   transition: border-color 0.25s ease;
   &:focus {
-    border-color: #de4f4f;
+    border-color: var(--text-link);
   }
 }