Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit a956fb3

Browse filesBrowse 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
Copy full SHA for a956fb3

File tree

Expand file treeCollapse file tree

3 files changed

+185
-28
lines changed
Open diff view settings
Filter options
Expand file treeCollapse file tree

3 files changed

+185
-28
lines changed
Open diff view settings
Collapse file

‎doc/api_assets/hljs.css‎

Copy file name to clipboardExpand all lines: doc/api_assets/hljs.css
+17Lines 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+
}
Collapse file

‎doc/api_assets/style.css‎

Copy file name to clipboardExpand all lines: doc/api_assets/style.css
+117-26Lines 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;
Collapse file

‎doc/template.html‎

Copy file name to clipboardExpand all lines: doc/template.html
+51-2Lines 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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.