Skip to content

Commit 2f4f8b8

Browse files
p8p8
committed
Add initial dark mode support
Most dark mode colors are copied from the Rails guides.
1 parent 2a0bbb7 commit 2f4f8b8

File tree

3 files changed

+79
-26
lines changed

3 files changed

+79
-26
lines changed

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

Lines changed: 34 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,20 @@
1+
:root {
2+
--text-color: #3B3B3B;
3+
--background-color: #fff;
4+
--border-color: #ccc;
5+
--code-background-color: #eee;
6+
--source-background-color: #fffde8;
7+
--method-heading-color: #555;
8+
}
9+
110
html {
211
height: 100%;
312
}
13+
414
body {
515
font-family: "Helvetica Neue", Arial, sans-serif;
6-
background: #FFF;
7-
color: #3B3B3B;
16+
background: var(--background-color);
17+
color: var(--text-color);
818
margin: 0px;
919
font-size: 15px;
1020
line-height: 1.25em;
@@ -95,7 +105,7 @@ h2 {
95105

96106
h3 {
97107
font-size: 1.4em;
98-
color:#555;
108+
color: var(--method-heading-color);
99109
margin: 1.4em 0 0.7em 0;
100110
font-weight: normal;
101111
}
@@ -238,7 +248,7 @@ pre
238248
font-size: 1.2em;
239249
padding: 0 0 0.25em 0;
240250
font-weight: bold;
241-
border-bottom: 1px solid #000;
251+
border-bottom: 1px solid var(--border-color);
242252
}
243253

244254
.contenttitle {
@@ -275,7 +285,7 @@ tt {
275285
}
276286

277287
.dyn-source {
278-
background: #fffde8;
288+
background: var(--source-background-color);
279289
color: #000;
280290
border: #ffe0bb dotted 1px;
281291
margin: 0.5em 2em 0.5em 0;
@@ -284,7 +294,7 @@ tt {
284294

285295
.description pre {
286296
padding: 1em 1.2em;
287-
background: #EEEEEE;
297+
background: var(--code-background-color);
288298
border-radius: 10px;
289299
font-size: 15px;
290300
}
@@ -309,7 +319,7 @@ tt {
309319
padding: 0 0 0.2em 0;
310320
margin-bottom: 0.8em;
311321
font-size: 1.1em;
312-
color:#333;
322+
color: var(--heading-color);
313323
}
314324
.method .method-title {
315325
border-bottom: 1px dotted #666;
@@ -374,9 +384,8 @@ tt {
374384
}
375385

376386
p code {
377-
background: #eeeeee;
378-
border-radius: 2px;
379-
border: 1px solid #dddddd;
387+
background: var(--code-background-color);
388+
border-radius: 5px;
380389
font-family: Consolas, Menlo, Courier, monospace;
381390
font-size: 14px;
382391
margin-bottom: 1px;
@@ -447,7 +456,6 @@ a.back-to-top.show {
447456
visibility: visible;
448457
}
449458

450-
451459
/*
452460
* More-Less widget
453461
*/
@@ -485,3 +493,18 @@ details.more-less:not([open]) .more-less__less,
485493
details.more-less[open] .more-less__more {
486494
display: none;
487495
}
496+
497+
@media (prefers-color-scheme: dark) {
498+
:root {
499+
--text-color: #ddd;
500+
--background-color: #222222;
501+
--border-color: #444;
502+
--code-background-color: #000000;
503+
--source-background-color: #000000;
504+
--method-heading-color: #ccc;
505+
}
506+
507+
body {
508+
--link-color: #ee3f3f;
509+
}
510+
}

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

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
/* 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+
}
28
.panel_checkbox, .panel_mobile_button, .panel_mobile_button_close
39
{
410
display: none;
@@ -82,11 +88,11 @@
8288
top: 0;
8389
width: 300px;
8490
height: 100%;
85-
background: #FFF;
91+
background: var(--background-color);
8692
z-index: 200;
8793
font-family: "Helvetica Neue", "Arial", sans-serif;
8894
overflow-x: hidden;
89-
border-right: 1px #ccc solid;
95+
border-right: 1px solid var(--border-color);
9096
line-height: 1;
9197
}
9298

@@ -131,7 +137,7 @@
131137
/* Header with search box (begin) */
132138
.panel .header
133139
{
134-
background: white url(../i/search.svg) no-repeat;
140+
background: var(--background-color) url(../i/search.svg) no-repeat;
135141
background-position: 5px;
136142
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
137143
height: 40px;
@@ -162,6 +168,8 @@
162168
margin: 0;
163169
margin-left: 25px;
164170
outline: none;
171+
background: var(--background-color);
172+
color: var(--text-color);
165173
}
166174

167175
@media (max-width: 599px) {
@@ -205,14 +213,14 @@
205213
}
206214

207215
.panel .result ul li:nth-child(2n) {
208-
background: #F0EFEF;
216+
background: var(--panel-alternate-background-color);
209217
}
210218

211219
.panel .result ul li h1
212220
{
213221
font-size: 13px;
214222
font-weight: normal;
215-
color: #333;
223+
color: var(--text-color);
216224
margin-top: 0;
217225
margin-bottom: 2px;
218226
white-space: nowrap;
@@ -221,7 +229,7 @@
221229
.panel .result ul li p
222230
{
223231
font-size: 11px;
224-
color: #333;
232+
color: var(--text-color);
225233
margin-bottom: 2px;
226234
white-space: nowrap;
227235
}
@@ -234,12 +242,12 @@
234242

235243
.panel .result ul li b
236244
{
237-
color: #000;
245+
color: var(--panel-highlight-color);
238246
}
239247

240248
.panel .result ul li.current
241249
{
242-
background: #B61D1D;
250+
background: var(--panel-current-background-color);
243251
}
244252

245253
.panel .result ul li.current h1,
@@ -263,12 +271,12 @@
263271
.panel .result ul li:hover,
264272
.panel .result ul li.selected
265273
{
266-
background: #d0d0d0;
274+
background: var(--panel-hover-background-color);
267275
}
268276

269277
.panel .result ul li.current:hover
270278
{
271-
background: #B61D1D;
279+
background: var(--panel-current-background-color);
272280
}
273281

274282
.panel .result ul li .badge
@@ -345,7 +353,7 @@
345353
/* Tree (begin) */ /**/
346354
.panel .tree
347355
{
348-
background: white;
356+
background: var(--background-color);
349357
position: relative;
350358
bottom: 0;
351359
left: 0;
@@ -402,7 +410,7 @@
402410
{
403411
font-size: 13px;
404412
font-weight: normal;
405-
color: #000;
413+
color: var(--text-color);
406414
margin-top: 0;
407415
margin-bottom: 2px;
408416
white-space: nowrap;
@@ -441,7 +449,7 @@
441449

442450
.panel .tree ul li.current
443451
{
444-
background: #B61D1D;
452+
background: var(--panel-current-background-color);
445453
}
446454

447455
.panel .tree ul li.current .icon
@@ -474,18 +482,32 @@
474482

475483
.panel .tree ul li:hover
476484
{
477-
background: #d0d0d0;
485+
background: var(--panel-hover-background-color);
478486
}
479487

480488
.panel .tree ul li.current:hover
481489
{
482-
background: #B61D1D;
490+
background: var(--panel-current-background-color);
483491
}
484492

485493
.panel .tree .stopper
486494
{
487495
display: none;
488496
}
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+
489511
/* Tree (end) */ /**/
490512

491513
/* Panel (end) */

‎lib/rdoc/generator/template/rails/resources/i/dark/tree_bg.svg‎

Lines changed: 8 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)