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

p8 · web-flow · commit 3feb058f4aca · 2023-08-08T12:17:44.000+02:00
Add initial dark mode support
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
  */
@@ -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;
+  }
+}
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;
@@ -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) */
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;`
`@@ -86,11 +92,11 @@`
`86`	`92`	`top: 0;`
`87`	`93`	`width: 300px;`
`88`	`94`	`height: 100%;`
`89`		`- background: #FFF;`
	`95`	`+ background: var(--background-color);`
`90`	`96`	`z-index: 200;`
`91`	`97`	`font-family: "Helvetica Neue", "Arial", sans-serif;`
`92`	`98`	`overflow-x: hidden;`
`93`		`- border-right: 1px #ccc solid;`
	`99`	`+ border-right: 1px solid var(--border-color);`
`94`	`100`	`line-height: 1;`
`95`	`101`	`}`
`96`	`102`
`@@ -135,7 +141,7 @@`
`135`	`141`	`/* Header with search box (begin) */`
`136`	`142`	`.panel .header`
`137`	`143`	`{`
`138`		`- background: white url(../i/search.svg) no-repeat;`
	`144`	`+ background: var(--background-color) url(../i/search.svg) no-repeat;`
`139`	`145`	`background-position: 5px;`
`140`	`146`	`box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);`
`141`	`147`	`height: 40px;`
`@@ -166,6 +172,8 @@`
`166`	`172`	`margin: 0;`
`167`	`173`	`margin-left: 25px;`
`168`	`174`	`outline: none;`
	`175`	`+ background: var(--background-color);`
	`176`	`+ color: var(--text-color);`
`169`	`177`	`}`
`170`	`178`
`171`	`179`	`@media (max-width: 599px) {`
`@@ -209,14 +217,14 @@`
`209`	`217`	`}`
`210`	`218`
`211`	`219`	`.panel .result ul li:nth-child(2n) {`
`212`		`- background: #F0EFEF;`
	`220`	`+ background: var(--panel-alternate-background-color);`
`213`	`221`	`}`
`214`	`222`
`215`	`223`	`.panel .result ul li h1`
`216`	`224`	`{`
`217`	`225`	`font-size: 13px;`
`218`	`226`	`font-weight: normal;`
`219`		`- color: #333;`
	`227`	`+ color: var(--text-color);`
`220`	`228`	`margin-top: 0;`
`221`	`229`	`margin-bottom: 2px;`
`222`	`230`	`white-space: nowrap;`
`@@ -225,7 +233,7 @@`
`225`	`233`	`.panel .result ul li p`
`226`	`234`	`{`
`227`	`235`	`font-size: 11px;`
`228`		`- color: #333;`
	`236`	`+ color: var(--text-color);`
`229`	`237`	`margin-bottom: 2px;`
`230`	`238`	`white-space: nowrap;`
`231`	`239`	`}`
`@@ -238,12 +246,12 @@`
`238`	`246`
`239`	`247`	`.panel .result ul li b`
`240`	`248`	`{`
`241`		`- color: #000;`
	`249`	`+ color: var(--panel-highlight-color);`
`242`	`250`	`}`
`243`	`251`
`244`	`252`	`.panel .result ul li.current`
`245`	`253`	`{`
`246`		`- background: #B61D1D;`
	`254`	`+ background: var(--panel-current-background-color);`
`247`	`255`	`}`
`248`	`256`
`249`	`257`	`.panel .result ul li.current h1,`
`@@ -267,12 +275,12 @@`
`267`	`275`	`.panel .result ul li:hover,`
`268`	`276`	`.panel .result ul li.selected`
`269`	`277`	`{`
`270`		`- background: #d0d0d0;`
	`278`	`+ background: var(--panel-hover-background-color);`
`271`	`279`	`}`
`272`	`280`
`273`	`281`	`.panel .result ul li.current:hover`
`274`	`282`	`{`
`275`		`- background: #B61D1D;`
	`283`	`+ background: var(--panel-current-background-color);`
`276`	`284`	`}`
`277`	`285`
`278`	`286`	`.panel .result ul li .badge`
`@@ -349,7 +357,7 @@`
`349`	`357`	`/* Tree (begin) / /*/`
`350`	`358`	`.panel .tree`
`351`	`359`	`{`
`352`		`- background: white;`
	`360`	`+ background: var(--background-color);`
`353`	`361`	`position: relative;`
`354`	`362`	`bottom: 0;`
`355`	`363`	`left: 0;`
`@@ -406,7 +414,7 @@`
`406`	`414`	`{`
`407`	`415`	`font-size: 13px;`
`408`	`416`	`font-weight: normal;`
`409`		`- color: #000;`
	`417`	`+ color: var(--text-color);`
`410`	`418`	`margin-top: 0;`
`411`	`419`	`margin-bottom: 2px;`
`412`	`420`	`white-space: nowrap;`
`@@ -445,7 +453,7 @@`
`445`	`453`
`446`	`454`	`.panel .tree ul li.current`
`447`	`455`	`{`
`448`		`- background: #B61D1D;`
	`456`	`+ background: var(--panel-current-background-color);`
`449`	`457`	`}`
`450`	`458`
`451`	`459`	`.panel .tree ul li.current .icon`
`@@ -478,18 +486,32 @@`
`478`	`486`
`479`	`487`	`.panel .tree ul li:hover`
`480`	`488`	`{`
`481`		`- background: #d0d0d0;`
	`489`	`+ background: var(--panel-hover-background-color);`
`482`	`490`	`}`
`483`	`491`
`484`	`492`	`.panel .tree ul li.current:hover`
`485`	`493`	`{`
`486`		`- background: #B61D1D;`
	`494`	`+ background: var(--panel-current-background-color);`
`487`	`495`	`}`
`488`	`496`
`489`	`497`	`.panel .tree .stopper`
`490`	`498`	`{`
`491`	`499`	`display: none;`
`492`	`500`	`}`
	`501`	`+`
	`502`	`+ @media (prefers-color-scheme: dark) {`
	`503`	`+ :root {`
	`504`	`+ --panel-hover-background-color: #3b3b3b;`
	`505`	`+ --panel-alternate-background-color: #000000;`
	`506`	`+ --panel-highlight-color: #fff;`
	`507`	`+ }`
	`508`	`+`
	`509`	`+ .panel .tree ul:first-child {`
	`510`	`+ background: url(../i/dark/tree_bg.svg);`
	`511`	`+ background-size: 1px 60px;`
	`512`	`+ }`
	`513`	`+ }`
	`514`	`+`
`493`	`515`	`/* Tree (end) / /*/`
`494`	`516`
`495`	`517`	`/* Panel (end) */`