Merge pull request #268 from p8/features/dark-mode

Add initial dark mode support

lib/rdoc/generator/template/rails/resources/css/main.css

@@ -1,10 +1,20 @@
+:root {
+  --text-color: #3B3B3B;
+  --background-color: #fff;
+  --border-color: #ccc;
+  --code-background-color: #eee;
+  --source-background-color: #fffde8;
+  --method-heading-color: #555;
+}
+
 html {
   height: 100%;
 }
+
 body {
   font-family: "Helvetica Neue", Arial, sans-serif;
-  background: #FFF;
-  color: #3B3B3B;
+  background: var(--background-color);
+  color: var(--text-color);
   margin: 0px;
   font-size: 15px;
   line-height: 1.25em;
@@ -95,7 +105,7 @@ h2 {
 
 h3 {
     font-size: 1.4em;
-    color:#555;
+    color: var(--method-heading-color);
     margin: 1.4em 0 0.7em 0;
     font-weight: normal;
 }
@@ -238,7 +248,7 @@ pre
   font-size: 1.2em;
   padding: 0 0 0.25em 0;
   font-weight: bold;
-  border-bottom: 1px solid #000;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .contenttitle {
@@ -275,7 +285,7 @@ tt {
 }
 
 .dyn-source {
-  background: #fffde8;
+  background: var(--source-background-color);
   color: #000;
   border: #ffe0bb dotted 1px;
   margin: 0.5em 2em 0.5em 0;
@@ -284,7 +294,7 @@ tt {
 
 .description pre {
   padding: 1em 1.2em;
-  background: #EEEEEE;
+  background: var(--code-background-color);
   border-radius: 10px;
   font-size: 15px;
 }
@@ -309,7 +319,7 @@ tt {
     padding: 0 0 0.2em 0;
     margin-bottom: 0.8em;
     font-size: 1.1em;
-    color:#333;
+    color: var(--heading-color);
 }
 .method .method-title {
     border-bottom: 1px dotted #666;
@@ -374,9 +384,8 @@ tt {
 }
 
 p code {
-  background: #eeeeee;
-  border-radius: 2px;
-  border: 1px solid #dddddd;
+  background: var(--code-background-color);
+  border-radius: 5px;
   font-family: Consolas, Menlo, Courier, monospace;
   font-size: 14px;
   margin-bottom: 1px;
@@ -447,7 +456,6 @@ a.back-to-top.show {
   visibility: visible;
 }
 
-
 /*
  * More-Less widget
  */
@@ -492,3 +500,18 @@ details.more-less:not([open]) .more-less__less,
 details.more-less[open] .more-less__more {
   display: none;
 }
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text-color: #ddd;
+    --background-color: #222222;
+    --border-color: #444;
+    --code-background-color: #000000;
+    --source-background-color: #000000;
+    --method-heading-color: #ccc;
+  }
+
+  body {
+    --link-color: #ee3f3f;
+  }
+}

lib/rdoc/generator/template/rails/resources/css/panel.css

@@ -1,4 +1,10 @@
 /* Panel (begin) */
+:root {
+  --panel-hover-background-color: #d0d0d0;
+  --panel-alternate-background-color: #F0EFEF;
+  --panel-current-background-color: #B61D1D;
+  --panel-highlight-color: #000;
+}
     .panel_checkbox, .panel_mobile_button, .panel_mobile_button_close
     {
         display: none;
@@ -86,11 +92,11 @@
         top: 0;
         width: 300px;
         height: 100%;
-        background: #FFF;
+        background: var(--background-color);
         z-index: 200;
         font-family: "Helvetica Neue", "Arial", sans-serif;
         overflow-x: hidden;
-        border-right: 1px #ccc solid;
+        border-right: 1px solid var(--border-color);
         line-height: 1;
     }
 
@@ -135,7 +141,7 @@
     /* Header with search box (begin) */
         .panel .header
         {
-            background: white url(../i/search.svg) no-repeat;
+            background: var(--background-color) url(../i/search.svg) no-repeat;
             background-position: 5px;
             box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
             height: 40px;
@@ -166,6 +172,8 @@
             margin: 0;
             margin-left: 25px;
             outline: none;
+            background: var(--background-color);
+            color: var(--text-color);
         }
 
         @media (max-width: 599px) {
@@ -209,14 +217,14 @@
         }
 
         .panel .result ul li:nth-child(2n) {
-            background: #F0EFEF;
+            background: var(--panel-alternate-background-color);
         }
 
         .panel .result ul li h1
         {
             font-size: 13px;
             font-weight: normal;
-            color: #333;
+            color: var(--text-color);
             margin-top: 0;
             margin-bottom: 2px;
             white-space: nowrap;
@@ -225,7 +233,7 @@
         .panel .result ul li p
         {
             font-size: 11px;
-            color: #333;
+            color: var(--text-color);
             margin-bottom: 2px;
             white-space: nowrap;
         }
@@ -238,12 +246,12 @@
 
         .panel .result ul li b
         {
-            color: #000;
+            color: var(--panel-highlight-color);
         }
 
         .panel .result ul li.current
         {
-            background: #B61D1D;
+            background: var(--panel-current-background-color);
         }
 
         .panel .result ul li.current h1,
@@ -267,12 +275,12 @@
         .panel .result ul li:hover,
         .panel .result ul li.selected
         {
-            background: #d0d0d0;
+            background: var(--panel-hover-background-color);
         }
 
         .panel .result ul li.current:hover
         {
-            background: #B61D1D;
+            background: var(--panel-current-background-color);
         }
 
         .panel .result ul li .badge
@@ -349,7 +357,7 @@
     /* Tree (begin) */ /**/
         .panel .tree
         {
-            background: white;
+            background: var(--background-color);
             position: relative;
             bottom: 0;
             left: 0;
@@ -406,7 +414,7 @@
         {
             font-size: 13px;
             font-weight: normal;
-            color: #000;
+            color: var(--text-color);
             margin-top: 0;
             margin-bottom: 2px;
             white-space: nowrap;
@@ -445,7 +453,7 @@
 
         .panel .tree ul li.current
         {
-            background: #B61D1D;
+            background: var(--panel-current-background-color);
         }
 
         .panel .tree ul li.current .icon
@@ -478,18 +486,32 @@
 
         .panel .tree ul li:hover
         {
-            background: #d0d0d0;
+            background: var(--panel-hover-background-color);
         }
 
         .panel .tree ul li.current:hover
         {
-            background: #B61D1D;
+            background: var(--panel-current-background-color);
         }
 
         .panel .tree .stopper
         {
             display: none;
         }
+
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --panel-hover-background-color: #3b3b3b;
+                --panel-alternate-background-color: #000000;
+                --panel-highlight-color: #fff;
+            }
+
+            .panel .tree ul:first-child {
+                background: url(../i/dark/tree_bg.svg);
+                background-size: 1px 60px;
+            }
+        }
+
     /* Tree (end) */ /**/
 
 /* Panel (end) */