Skip to content

Commit 3feb058

Browse files
p8p8
authored
Merge pull request #268 from p8/features/dark-mode
Add initial dark mode support
2 parents 4f70fba + 2f4f8b8 commit 3feb058

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
*/
@@ -492,3 +500,18 @@ details.more-less:not([open]) .more-less__less,
492500
details.more-less[open] .more-less__more {
493501
display: none;
494502
}
503+
504+
@media (prefers-color-scheme: dark) {
505+
:root {
506+
--text-color: #ddd;
507+
--background-color: #222222;
508+
--border-color: #444;
509+
--code-background-color: #000000;
510+
--source-background-color: #000000;
511+
--method-heading-color: #ccc;
512+
}
513+
514+
body {
515+
--link-color: #ee3f3f;
516+
}
517+
}

‎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;
@@ -86,11 +92,11 @@
8692
top: 0;
8793
width: 300px;
8894
height: 100%;
89-
background: #FFF;
95+
background: var(--background-color);
9096
z-index: 200;
9197
font-family: "Helvetica Neue", "Arial", sans-serif;
9298
overflow-x: hidden;
93-
border-right: 1px #ccc solid;
99+
border-right: 1px solid var(--border-color);
94100
line-height: 1;
95101
}
96102

@@ -135,7 +141,7 @@
135141
/* Header with search box (begin) */
136142
.panel .header
137143
{
138-
background: white url(../i/search.svg) no-repeat;
144+
background: var(--background-color) url(../i/search.svg) no-repeat;
139145
background-position: 5px;
140146
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
141147
height: 40px;
@@ -166,6 +172,8 @@
166172
margin: 0;
167173
margin-left: 25px;
168174
outline: none;
175+
background: var(--background-color);
176+
color: var(--text-color);
169177
}
170178

171179
@media (max-width: 599px) {
@@ -209,14 +217,14 @@
209217
}
210218

211219
.panel .result ul li:nth-child(2n) {
212-
background: #F0EFEF;
220+
background: var(--panel-alternate-background-color);
213221
}
214222

215223
.panel .result ul li h1
216224
{
217225
font-size: 13px;
218226
font-weight: normal;
219-
color: #333;
227+
color: var(--text-color);
220228
margin-top: 0;
221229
margin-bottom: 2px;
222230
white-space: nowrap;
@@ -225,7 +233,7 @@
225233
.panel .result ul li p
226234
{
227235
font-size: 11px;
228-
color: #333;
236+
color: var(--text-color);
229237
margin-bottom: 2px;
230238
white-space: nowrap;
231239
}
@@ -238,12 +246,12 @@
238246

239247
.panel .result ul li b
240248
{
241-
color: #000;
249+
color: var(--panel-highlight-color);
242250
}
243251

244252
.panel .result ul li.current
245253
{
246-
background: #B61D1D;
254+
background: var(--panel-current-background-color);
247255
}
248256

249257
.panel .result ul li.current h1,
@@ -267,12 +275,12 @@
267275
.panel .result ul li:hover,
268276
.panel .result ul li.selected
269277
{
270-
background: #d0d0d0;
278+
background: var(--panel-hover-background-color);
271279
}
272280

273281
.panel .result ul li.current:hover
274282
{
275-
background: #B61D1D;
283+
background: var(--panel-current-background-color);
276284
}
277285

278286
.panel .result ul li .badge
@@ -349,7 +357,7 @@
349357
/* Tree (begin) */ /**/
350358
.panel .tree
351359
{
352-
background: white;
360+
background: var(--background-color);
353361
position: relative;
354362
bottom: 0;
355363
left: 0;
@@ -406,7 +414,7 @@
406414
{
407415
font-size: 13px;
408416
font-weight: normal;
409-
color: #000;
417+
color: var(--text-color);
410418
margin-top: 0;
411419
margin-bottom: 2px;
412420
white-space: nowrap;
@@ -445,7 +453,7 @@
445453

446454
.panel .tree ul li.current
447455
{
448-
background: #B61D1D;
456+
background: var(--panel-current-background-color);
449457
}
450458

451459
.panel .tree ul li.current .icon
@@ -478,18 +486,32 @@
478486

479487
.panel .tree ul li:hover
480488
{
481-
background: #d0d0d0;
489+
background: var(--panel-hover-background-color);
482490
}
483491

484492
.panel .tree ul li.current:hover
485493
{
486-
background: #B61D1D;
494+
background: var(--panel-current-background-color);
487495
}
488496

489497
.panel .tree .stopper
490498
{
491499
display: none;
492500
}
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+
493515
/* Tree (end) */ /**/
494516

495517
/* 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)