Skip to content

Commit a956fb3

Browse files
AjayPoshakdanielleadams
AjayPoshak
authored and
danielleadams
committed
doc: add dark mode
Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com> PR-URL: #36313 Reviewed-By: Antoine du Hamel <duhamelantoine1995@gmail.com> Reviewed-By: Rich Trott <rtrott@gmail.com>
1 parent 757b966 commit a956fb3

File tree

3 files changed

+185
-28
lines changed

3 files changed

+185
-28
lines changed

‎doc/api_assets/hljs.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,20 @@
2828
color: #666;
2929
font-weight: lighter;
3030
}
31+
32+
.dark-mode .hljs-number,
33+
.dark-mode .hljs-string,
34+
.dark-mode .hljs-regexp {
35+
color: var(--green4);
36+
}
37+
38+
.dark-mode .hljs-keyword,
39+
.dark-mode .hljs-attribute {
40+
color: #66d9ef;
41+
}
42+
43+
.dark-mode .hljs-doctag .hljs-type,
44+
.dark-mode .hljs-doctag .hljs-variable,
45+
.dark-mode .hljs-comment {
46+
color: var(--gray7);
47+
}

‎doc/api_assets/style.css‎

Lines changed: 117 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,55 @@
1+
/*--------------------- CSS Variables ----------------------------*/
2+
:root {
3+
--black: #000000;
4+
--black1: #090c15;
5+
--black2: #2c3437;
6+
--black3: #0d111d;
7+
--white: #ffffff;
8+
--white-smoke: #f2f2f2;
9+
--grey-smoke: #e9edf0;
10+
--red1: #d60027;
11+
--red2: #d50027;
12+
--red3: #ca5010;
13+
--green1: #43853d;
14+
--green2: #5a8147;
15+
--green3: #454545;
16+
--green4: #99cc7d;
17+
--green5: #84ba64;
18+
--gray1: #707070;
19+
--gray2: #b4b4b4;
20+
--gray3: #cccccc;
21+
--gray4: #040404;
22+
--gray5: #7a7a7a;
23+
--gray6: #333333;
24+
--gray7: #c1c1c1;
25+
--grey8: #ddd;
26+
27+
--color-brand-primary: var(--gray6);
28+
--color-brand-secondary: var(--green1);
29+
--color-text-primary: var(--gray6);
30+
--color-text-secondary: var(--green2);
31+
--color-fill-app: var(--white);
32+
--color-text-nav: var(--gray3);
33+
--highlight-background-color: var(--white-smoke);
34+
--color-links: var(--green1);
35+
--color-fill-side-nav: var(--gray6);
36+
--api-stability-links-bg: rgba(255, 255, 255, .4)
37+
}
38+
39+
.dark-mode {
40+
--color-links: var(--green5);
41+
--color-fill-app: var(--black1);
42+
--color-text-primary: var(--white);
43+
--color-fill-side-nav: var(--black3);
44+
--highlight-background-color: var(--black2);
45+
}
46+
47+
.dark-mode code,
48+
.dark-mode tt {
49+
color: var(--grey-smoke);
50+
background-color: var(--highlight-background-color);
51+
}
52+
153
/*--------------------- Layout and Typography ----------------------------*/
254
html {
355
font-size: 1rem;
@@ -16,8 +68,8 @@ body {
1668
font-family: Lato, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
1769
margin: 0;
1870
padding: 0;
19-
color: #333;
20-
background-color: #fff;
71+
color: var(--color-text-primary);
72+
background-color: var(--color-fill-app);
2173
}
2274

2375
h1, h1 code { font-size: 2.5rem; }
@@ -67,16 +119,16 @@ a.type {
67119
a:link,
68120
a:active,
69121
a:visited {
70-
color: #43853d;
122+
color: var(--color-links);
71123
text-decoration: none;
72124
border-radius: 2px;
73125
padding: 1px 3px;
74126
}
75127

76128
a:hover,
77129
a:focus {
78-
color: #fff;
79-
background-color: #43853d;
130+
color: var(--white);
131+
background-color:var(--green1);
80132
outline: none;
81133
}
82134

@@ -109,7 +161,7 @@ em code {
109161

110162
#gtoc > ul > li {
111163
display: inline;
112-
border-right: 1px #000 solid;
164+
border-right: 1px currentColor solid;
113165
margin-right: .4rem;
114166
padding-right: .4rem;
115167
}
@@ -138,8 +190,8 @@ li.version-picker a span {
138190
}
139191

140192
ol.version-picker {
141-
background-color: #fff;
142-
border: 1px solid #43853d;
193+
background-color: var(--color-fill-app);
194+
border: 1px solid var(--color-brand-secondary);
143195
border-radius: 0 0 2px 2px;
144196
display: none;
145197
list-style: none;
@@ -175,14 +227,14 @@ ol.version-picker li:last-child a {
175227
}
176228

177229
.api_stability {
178-
color: #fff !important;
230+
color: var(--white) !important;
179231
margin: 0 0 1rem;
180232
padding: 1rem;
181233
line-height: 1.5;
182234
}
183235

184236
.api_stability * {
185-
color: #fff !important;
237+
color: var(--white) !important;
186238
}
187239

188240
.api_stability a {
@@ -192,23 +244,23 @@ ol.version-picker li:last-child a {
192244
.api_stability a:hover,
193245
.api_stability a:active,
194246
.api_stability a:focus {
195-
background-color: rgba(255, 255, 255, .4);
247+
background-color: var(--api-stability-links-bg);
196248
}
197249

198250
.api_stability a code {
199251
background-color: transparent;
200252
}
201253

202254
.api_stability_0 {
203-
background-color: #d60027;
255+
background-color: var(--red1);
204256
}
205257

206258
.api_stability_1 {
207-
background-color: #ca5010;
259+
background-color: var(--red3);
208260
}
209261

210262
.api_stability_2 {
211-
background-color: #5a8147;
263+
background-color: var(--green2);
212264
}
213265

214266
.api_metadata {
@@ -386,7 +438,7 @@ code {
386438
pre {
387439
padding: 1rem;
388440
vertical-align: top;
389-
background-color: #f2f2f2;
441+
background-color: var(--highlight-background-color);
390442
margin: 1rem;
391443
overflow-x: auto;
392444
}
@@ -409,14 +461,14 @@ code.pre {
409461
}
410462

411463
#intro a {
412-
color: #ddd;
464+
color: var(--grey8);
413465
font-weight: 700;
414466
}
415467

416468
hr {
417469
background-color: transparent;
418470
border: medium none;
419-
border-bottom: 1px solid #7a7a7a;
471+
border-bottom: 1px solid var(--gray5);
420472
margin: 0 0 1rem;
421473
}
422474

@@ -442,8 +494,8 @@ hr {
442494
}
443495

444496
#toc .stability_0::after {
445-
background-color: #d50027;
446-
color: #fff;
497+
background-color: var(--red2);
498+
color: var(--white);
447499
content: "deprecated";
448500
margin-left: .25rem;
449501
padding: 1px 3px;
@@ -488,7 +540,7 @@ a code {
488540

489541
#column2.interior {
490542
width: 234px;
491-
background-color: #333;
543+
background-color: var(--color-fill-side-nav);
492544
position: fixed;
493545
left: 0;
494546
top: 0;
@@ -500,7 +552,7 @@ a code {
500552
#column2 ul {
501553
list-style: none;
502554
margin: .9rem 0 .5rem;
503-
background-color: #333;
555+
background-color: var(--color-fill-side-nav);
504556
}
505557

506558
#column2 > :first-child {
@@ -532,23 +584,23 @@ a code {
532584
}
533585

534586
#column2 ul li a {
535-
color: #ccc;
587+
color: var(--color-text-nav);
536588
border-radius: 0;
537589
}
538590

539591
#column2 ul li a.active,
540592
#column2 ul li a.active:hover,
541593
#column2 ul li a.active:focus {
542594
font-weight: 700;
543-
color: #fff;
595+
color: var(--white);
544596
background-color: transparent;
545597
}
546598

547599
#intro a:hover,
548600
#intro a:focus,
549601
#column2 ul li a:hover,
550602
#column2 ul li a:focus {
551-
color: #fff;
603+
color: var(--white);
552604
background-color: transparent;
553605
}
554606

@@ -563,7 +615,7 @@ span > .mark:visited {
563615
span > .mark:hover,
564616
span > .mark:focus,
565617
span > .mark:active {
566-
color: #43853d;
618+
color: var(--color-brand-secondary);
567619
background-color: transparent;
568620
}
569621

@@ -577,7 +629,7 @@ kbd {
577629
border-radius: 3px;
578630
border: 1px solid #b4b4b4;
579631
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
580-
color: #333;
632+
color: var(--color-text-primary);
581633
display: inline-block;
582634
font-size: .85em;
583635
font-weight: 700;
@@ -649,6 +701,23 @@ kbd {
649701
}
650702
}
651703

704+
.header-container {
705+
display: flex;
706+
align-items: center;
707+
margin: 1.5rem 0 1rem;
708+
justify-content: space-between;
709+
}
710+
711+
.header-container h1 {
712+
margin: 0;
713+
}
714+
715+
.theme-toggle-btn {
716+
border: none;
717+
background: transparent;
718+
outline: var(--brand3) dotted 2px;
719+
}
720+
652721
@media only screen and (max-width: 1024px) {
653722
#content {
654723
overflow: visible;
@@ -665,6 +734,28 @@ kbd {
665734
}
666735
}
667736

737+
.icon {
738+
cursor: pointer;
739+
}
740+
741+
.dark-icon {
742+
display: block;
743+
}
744+
745+
.light-icon {
746+
fill: var(--white);
747+
display: none;
748+
}
749+
750+
.dark-mode .dark-icon {
751+
display: none;
752+
}
753+
754+
.dark-mode .light-icon {
755+
fill: var(--white);
756+
display: block;
757+
}
758+
668759
@media print {
669760
html {
670761
height: auto;

‎doc/template.html‎

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
@@ -23,7 +23,20 @@
2323

2424
<div id="column1" data-id="__ID__" class="interior">
2525
<header>
26-
<h1>Node.js __VERSION__ Documentation</h1>
26+
<div class="header-container">
27+
<h1>Node.js __VERSION__ Documentation</h1>
28+
<button class="theme-toggle-btn" id="theme-toggle-btn" hidden>
29+
<svg xmlns="http://www.w3.org/2000/svg" class="icon dark-icon" height="24" width="24">
30+
<path fill="none" d="M0 0h24v24H0z" />
31+
<path d="M11.1 12.08c-2.33-4.51-.5-8.48.53-10.07C6.27 2.2 1.98 6.59 1.98 12c0 .14.02.28.02.42.62-.27 1.29-.42 2-.42 1.66 0 3.18.83 4.1 2.15A4.01 4.01 0 0111 18c0 1.52-.87 2.83-2.12 3.51.98.32 2.03.5 3.11.5 3.5 0 6.58-1.8 8.37-4.52-2.36.23-6.98-.97-9.26-5.41z"/>
32+
<path d="M7 16h-.18C6.4 14.84 5.3 14 4 14c-1.66 0-3 1.34-3 3s1.34 3 3 3h3c1.1 0 2-.9 2-2s-.9-2-2-2z"/>
33+
</svg>
34+
<svg xmlns="http://www.w3.org/2000/svg" class="icon light-icon" height="24" width="24">
35+
<path d="M0 0h24v24H0z" fill="none" />
36+
<path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"/>
37+
</svg>
38+
</button>
39+
</div>
2740
<div id="gtoc">
2841
<ul>
2942
<li>
@@ -54,4 +67,40 @@ <h2>Table of Contents</h2>
5467
</div>
5568
</div>
5669
</body>
70+
<script>
71+
'use strict';
72+
{
73+
const kCustomPreference = 'customDarkTheme';
74+
const userSettings = sessionStorage.getItem(kCustomPreference);
75+
const themeToggleButton = document.getElementById('theme-toggle-btn');
76+
if (userSettings === null && window.matchMedia) {
77+
const mq = window.matchMedia('(prefers-color-scheme: dark)');
78+
if ('onchange' in mq) {
79+
function mqChangeListener(e) {
80+
document.body.classList.toggle('dark-mode', e.matches);
81+
}
82+
mq.addEventListener('change', mqChangeListener);
83+
if (themeToggleButton) {
84+
themeToggleButton.addEventListener('click', function() {
85+
mq.removeEventListener('change', mqChangeListener);
86+
}, { once: true });
87+
}
88+
}
89+
if (mq.matches) {
90+
document.body.classList.add('dark-mode');
91+
}
92+
} else if (userSettings === 'true') {
93+
document.body.classList.add('dark-mode');
94+
}
95+
if (themeToggleButton) {
96+
themeToggleButton.hidden = false;
97+
themeToggleButton.addEventListener('click', function() {
98+
sessionStorage.setItem(
99+
kCustomPreference,
100+
document.body.classList.toggle('dark-mode')
101+
);
102+
});
103+
}
104+
}
105+
</script>
57106
</html>

0 commit comments

Comments
 (0)