Add initial dark mode support

p8 · p8 · commit 2f4f8b8ef9f8 · 2023-08-06T15:51:06.000+02:00
Most dark mode colors are copied from the Rails guides.
diff --git a/lib/rdoc/generator/template/rails/resources/css/main.css b/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
  */
@@ -485,3 +493,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;
+  }
+}
diff --git a/lib/rdoc/generator/template/rails/resources/css/panel.css b/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;
@@ -82,11 +88,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;
     }
 
@@ -131,7 +137,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;
@@ -162,6 +168,8 @@
             margin: 0;
             margin-left: 25px;
             outline: none;
+            background: var(--background-color);
+            color: var(--text-color);
         }
 
         @media (max-width: 599px) {
@@ -205,14 +213,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;
@@ -221,7 +229,7 @@
         .panel .result ul li p
         {
             font-size: 11px;
-            color: #333;
+            color: var(--text-color);
             margin-bottom: 2px;
             white-space: nowrap;
         }
@@ -234,12 +242,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,
@@ -263,12 +271,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
@@ -345,7 +353,7 @@
     /* Tree (begin) */ /**/
         .panel .tree
         {
-            background: white;
+            background: var(--background-color);
             position: relative;
             bottom: 0;
             left: 0;
@@ -402,7 +410,7 @@
         {
             font-size: 13px;
             font-weight: normal;
-            color: #000;
+            color: var(--text-color);
             margin-top: 0;
             margin-bottom: 2px;
             white-space: nowrap;
@@ -441,7 +449,7 @@
 
         .panel .tree ul li.current
         {
-            background: #B61D1D;
+            background: var(--panel-current-background-color);
         }
 
         .panel .tree ul li.current .icon
@@ -474,18 +482,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) */
diff --git a/lib/rdoc/generator/template/rails/resources/i/dark/tree_bg.svg b/lib/rdoc/generator/template/rails/resources/i/dark/tree_bg.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1 60" style="enable-background:new 0 0 1 60;" xml:space="preserve">
+<style type="text/css">
+  .st0{fill:#000000;}
+</style>
+<rect class="st0" width="1" height="30"/>
+</svg>

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,10 @@`
`1`	`1`	`/* Panel (begin) */`
	`2`	`+:root {`
	`3`	`+ --panel-hover-background-color: #d0d0d0;`
	`4`	`+ --panel-alternate-background-color: #F0EFEF;`
	`5`	`+ --panel-current-background-color: #B61D1D;`
	`6`	`+ --panel-highlight-color: #000;`
	`7`	`+}`
`2`	`8`	`.panel_checkbox, .panel_mobile_button, .panel_mobile_button_close`
`3`	`9`	`{`
`4`	`10`	`display: none;`
`@@ -82,11 +88,11 @@`
`82`	`88`	`top: 0;`
`83`	`89`	`width: 300px;`
`84`	`90`	`height: 100%;`
`85`		`- background: #FFF;`
	`91`	`+ background: var(--background-color);`
`86`	`92`	`z-index: 200;`
`87`	`93`	`font-family: "Helvetica Neue", "Arial", sans-serif;`
`88`	`94`	`overflow-x: hidden;`
`89`		`- border-right: 1px #ccc solid;`
	`95`	`+ border-right: 1px solid var(--border-color);`
`90`	`96`	`line-height: 1;`
`91`	`97`	`}`
`92`	`98`
`@@ -131,7 +137,7 @@`
`131`	`137`	`/* Header with search box (begin) */`
`132`	`138`	`.panel .header`
`133`	`139`	`{`
`134`		`- background: white url(../i/search.svg) no-repeat;`
	`140`	`+ background: var(--background-color) url(../i/search.svg) no-repeat;`
`135`	`141`	`background-position: 5px;`
`136`	`142`	`box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);`
`137`	`143`	`height: 40px;`
`@@ -162,6 +168,8 @@`
`162`	`168`	`margin: 0;`
`163`	`169`	`margin-left: 25px;`
`164`	`170`	`outline: none;`
	`171`	`+ background: var(--background-color);`
	`172`	`+ color: var(--text-color);`
`165`	`173`	`}`
`166`	`174`
`167`	`175`	`@media (max-width: 599px) {`
`@@ -205,14 +213,14 @@`
`205`	`213`	`}`
`206`	`214`
`207`	`215`	`.panel .result ul li:nth-child(2n) {`
`208`		`- background: #F0EFEF;`
	`216`	`+ background: var(--panel-alternate-background-color);`
`209`	`217`	`}`
`210`	`218`
`211`	`219`	`.panel .result ul li h1`
`212`	`220`	`{`
`213`	`221`	`font-size: 13px;`
`214`	`222`	`font-weight: normal;`
`215`		`- color: #333;`
	`223`	`+ color: var(--text-color);`
`216`	`224`	`margin-top: 0;`
`217`	`225`	`margin-bottom: 2px;`
`218`	`226`	`white-space: nowrap;`
`@@ -221,7 +229,7 @@`
`221`	`229`	`.panel .result ul li p`
`222`	`230`	`{`
`223`	`231`	`font-size: 11px;`
`224`		`- color: #333;`
	`232`	`+ color: var(--text-color);`
`225`	`233`	`margin-bottom: 2px;`
`226`	`234`	`white-space: nowrap;`
`227`	`235`	`}`
`@@ -234,12 +242,12 @@`
`234`	`242`
`235`	`243`	`.panel .result ul li b`
`236`	`244`	`{`
`237`		`- color: #000;`
	`245`	`+ color: var(--panel-highlight-color);`
`238`	`246`	`}`
`239`	`247`
`240`	`248`	`.panel .result ul li.current`
`241`	`249`	`{`
`242`		`- background: #B61D1D;`
	`250`	`+ background: var(--panel-current-background-color);`
`243`	`251`	`}`
`244`	`252`
`245`	`253`	`.panel .result ul li.current h1,`
`@@ -263,12 +271,12 @@`
`263`	`271`	`.panel .result ul li:hover,`
`264`	`272`	`.panel .result ul li.selected`
`265`	`273`	`{`
`266`		`- background: #d0d0d0;`
	`274`	`+ background: var(--panel-hover-background-color);`
`267`	`275`	`}`
`268`	`276`
`269`	`277`	`.panel .result ul li.current:hover`
`270`	`278`	`{`
`271`		`- background: #B61D1D;`
	`279`	`+ background: var(--panel-current-background-color);`
`272`	`280`	`}`
`273`	`281`
`274`	`282`	`.panel .result ul li .badge`
`@@ -345,7 +353,7 @@`
`345`	`353`	`/* Tree (begin) / /*/`
`346`	`354`	`.panel .tree`
`347`	`355`	`{`
`348`		`- background: white;`
	`356`	`+ background: var(--background-color);`
`349`	`357`	`position: relative;`
`350`	`358`	`bottom: 0;`
`351`	`359`	`left: 0;`
`@@ -402,7 +410,7 @@`
`402`	`410`	`{`
`403`	`411`	`font-size: 13px;`
`404`	`412`	`font-weight: normal;`
`405`		`- color: #000;`
	`413`	`+ color: var(--text-color);`
`406`	`414`	`margin-top: 0;`
`407`	`415`	`margin-bottom: 2px;`
`408`	`416`	`white-space: nowrap;`
`@@ -441,7 +449,7 @@`
`441`	`449`
`442`	`450`	`.panel .tree ul li.current`
`443`	`451`	`{`
`444`		`- background: #B61D1D;`
	`452`	`+ background: var(--panel-current-background-color);`
`445`	`453`	`}`
`446`	`454`
`447`	`455`	`.panel .tree ul li.current .icon`
`@@ -474,18 +482,32 @@`
`474`	`482`
`475`	`483`	`.panel .tree ul li:hover`
`476`	`484`	`{`
`477`		`- background: #d0d0d0;`
	`485`	`+ background: var(--panel-hover-background-color);`
`478`	`486`	`}`
`479`	`487`
`480`	`488`	`.panel .tree ul li.current:hover`
`481`	`489`	`{`
`482`		`- background: #B61D1D;`
	`490`	`+ background: var(--panel-current-background-color);`
`483`	`491`	`}`
`484`	`492`
`485`	`493`	`.panel .tree .stopper`
`486`	`494`	`{`
`487`	`495`	`display: none;`
`488`	`496`	`}`
	`497`	`+`
	`498`	`+ @media (prefers-color-scheme: dark) {`
	`499`	`+ :root {`
	`500`	`+ --panel-hover-background-color: #3b3b3b;`
	`501`	`+ --panel-alternate-background-color: #000000;`
	`502`	`+ --panel-highlight-color: #fff;`
	`503`	`+ }`
	`504`	`+`
	`505`	`+ .panel .tree ul:first-child {`
	`506`	`+ background: url(../i/dark/tree_bg.svg);`
	`507`	`+ background-size: 1px 60px;`
	`508`	`+ }`
	`509`	`+ }`
	`510`	`+`
`489`	`511`	`/* Tree (end) / /*/`
`490`	`512`
`491`	`513`	`/* Panel (end) */`