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>

Author: AjayPoshak

doc/api_assets/hljs.css

@@ -28,3 +28,20 @@
 color:#666;
 font-weight: lighter;
 }
+
+.dark-mode .hljs-number,
+.dark-mode .hljs-string,
+.dark-mode .hljs-regexp {
+color:var(--green4);
+}
+
+.dark-mode .hljs-keyword,
+.dark-mode .hljs-attribute {
+color:#66d9ef;
+}
+
+.dark-mode .hljs-doctag .hljs-type,
+.dark-mode .hljs-doctag .hljs-variable,
+.dark-mode .hljs-comment {
+color:var(--gray7);
+}

doc/api_assets/style.css

@@ -1,3 +1,55 @@
+/*--------------------- CSS Variables ----------------------------*/
+:root {
+--black:#000000;
+--black1:#090c15;
+--black2:#2c3437;
+--black3:#0d111d;
+--white:#ffffff;
+--white-smoke:#f2f2f2;
+--grey-smoke:#e9edf0;
+--red1:#d60027;
+--red2:#d50027;
+--red3:#ca5010;
+--green1:#43853d;
+--green2:#5a8147;
+--green3:#454545;
+--green4:#99cc7d;
+--green5:#84ba64;
+--gray1:#707070;
+--gray2:#b4b4b4;
+--gray3:#cccccc;
+--gray4:#040404;
+--gray5:#7a7a7a;
+--gray6:#333333;
+--gray7:#c1c1c1;
+--grey8:#ddd;
+
+--color-brand-primary:var(--gray6);
+--color-brand-secondary:var(--green1);
+--color-text-primary:var(--gray6);
+--color-text-secondary:var(--green2);
+--color-fill-app:var(--white);
+--color-text-nav:var(--gray3);
+--highlight-background-color:var(--white-smoke);
+--color-links:var(--green1);
+--color-fill-side-nav:var(--gray6);
+--api-stability-links-bg:rgba(255,255,255,.4)
+}
+
+.dark-mode {
+--color-links:var(--green5);
+--color-fill-app:var(--black1);
+--color-text-primary:var(--white);
+--color-fill-side-nav:var(--black3);
+--highlight-background-color:var(--black2);
+}
+
+.dark-modecode,
+.dark-modett {
+color:var(--grey-smoke);
+background-color:var(--highlight-background-color);
+}
+
 /*--------------------- Layout and Typography ----------------------------*/
 html {
 font-size:1rem;
@@ -16,8 +68,8 @@ body {
 font-family: Lato,"Lucida Grande","Lucida Sans Unicode","Lucida Sans", Verdana, Tahoma, sans-serif;
 margin:0;
 padding:0;
-color:#333;
-background-color:#fff;
+color:var(--color-text-primary);
+background-color:var(--color-fill-app);
 }
 
 h1,h1code { font-size:2.5rem; }
@@ -67,16 +119,16 @@ a.type {
 a:link,
 a:active,
 a:visited {
-color:#43853d;
+color:var(--color-links);
 text-decoration: none;
 border-radius:2px;
 padding:1px3px;
 }
 
 a:hover,
 a:focus {
-color:#fff;
-background-color:#43853d;
+color:var(--white);
+background-color:var(--green1);
 outline: none;
 }
 
@@ -109,7 +161,7 @@ em code {
 
 #gtoc>ul>li {
 display: inline;
-border-right:1px#000 solid;
+border-right:1pxcurrentColor solid;
 margin-right:.4rem;
 padding-right:.4rem;
 }
@@ -138,8 +190,8 @@ li.version-picker a span {
 }
 
 ol.version-picker {
-background-color:#fff;
-border:1px solid #43853d;
+background-color:var(--color-fill-app);
+border:1px solid var(--color-brand-secondary);
 border-radius:002px2px;
 display: none;
 list-style: none;
@@ -175,14 +227,14 @@ ol.version-picker li:last-child a {
 }
 
 .api_stability {
-color:#fff!important;
+color:var(--white)!important;
 margin:001rem;
 padding:1rem;
 line-height:1.5;
 }
 
 .api_stability* {
-color:#fff!important;
+color:var(--white)!important;
 }
 
 .api_stabilitya {
@@ -192,23 +244,23 @@ ol.version-picker li:last-child a {
 .api_stabilitya:hover,
 .api_stabilitya:active,
 .api_stabilitya:focus {
-background-color:rgba(255,255,255,.4);
+background-color:var(--api-stability-links-bg);
 }
 
 .api_stabilityacode {
 background-color: transparent;
 }
 
 .api_stability_0 {
-background-color:#d60027;
+background-color:var(--red1);
 }
 
 .api_stability_1 {
-background-color:#ca5010;
+background-color:var(--red3);
 }
 
 .api_stability_2 {
-background-color:#5a8147;
+background-color:var(--green2);
 }
 
 .api_metadata {
@@ -386,7 +438,7 @@ code {
 pre {
 padding:1rem;
 vertical-align: top;
-background-color:#f2f2f2;
+background-color:var(--highlight-background-color);
 margin:1rem;
 overflow-x: auto;
 }
@@ -409,14 +461,14 @@ code.pre {
 }
 
 #introa {
-color:#ddd;
+color:var(--grey8);
 font-weight:700;
 }
 
 hr {
 background-color: transparent;
 border: medium none;
-border-bottom:1px solid #7a7a7a;
+border-bottom:1px solid var(--gray5);
 margin:001rem;
 }
 
@@ -442,8 +494,8 @@ hr {
 }
 
 #toc .stability_0::after {
-background-color:#d50027;
-color:#fff;
+background-color:var(--red2);
+color:var(--white);
 content:"deprecated";
 margin-left:.25rem;
 padding:1px3px;
@@ -488,7 +540,7 @@ a code {
 
 #column2.interior {
 width:234px;
-background-color:#333;
+background-color:var(--color-fill-side-nav);
 position: fixed;
 left:0;
 top:0;
@@ -500,7 +552,7 @@ a code {
 #column2ul {
 list-style: none;
 margin:.9rem0.5rem;
-background-color:#333;
+background-color:var(--color-fill-side-nav);
 }
 
 #column2>:first-child {
@@ -532,23 +584,23 @@ a code {
 }
 
 #column2ullia {
-color:#ccc;
+color:var(--color-text-nav);
 border-radius:0;
 }
 
 #column2ullia.active,
 #column2ullia.active:hover,
 #column2ullia.active:focus {
 font-weight:700;
-color:#fff;
+color:var(--white);
 background-color: transparent;
 }
 
 #introa:hover,
 #introa:focus,
 #column2ullia:hover,
 #column2ullia:focus {
-color:#fff;
+color:var(--white);
 background-color: transparent;
 }
 
@@ -563,7 +615,7 @@ span > .mark:visited {
 span> .mark:hover,
 span> .mark:focus,
 span> .mark:active {
-color:#43853d;
+color:var(--color-brand-secondary);
 background-color: transparent;
 }
 
@@ -577,7 +629,7 @@ kbd {
 border-radius:3px;
 border:1px solid #b4b4b4;
 box-shadow:01px1pxrgba(0,0,0,.2);
-color:#333;
+color:var(--color-text-primary);
 display: inline-block;
 font-size:.85em;
 font-weight:700;
@@ -649,6 +701,23 @@ kbd {
  }
 }
 
+.header-container {
+display: flex;
+align-items: center;
+margin:1.5rem01rem;
+justify-content: space-between;
+}
+
+.header-containerh1 {
+margin:0;
+}
+
+.theme-toggle-btn {
+border: none;
+background: transparent;
+outline:var(--brand3) dotted 2px;
+}
+
 @mediaonly screen and (max-width:1024px) {
 #content {
 overflow: visible;
@@ -665,6 +734,28 @@ kbd {
  }
 }
 
+.icon {
+cursor: pointer;
+}
+
+.dark-icon {
+display: block;
+}
+
+.light-icon {
+fill:var(--white);
+display: none;
+}
+
+.dark-mode .dark-icon {
+display: none;
+}
+
+.dark-mode .light-icon {
+fill:var(--white);
+display: block;
+}
+
 @media print {
 html {
 height: auto;

doc/template.html

@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <htmllang="en">
 <head>
 <metacharset="utf-8">
@@ -23,7 +23,20 @@
 
 <divid="column1" data-id="__ID__" class="interior">
 <header>
-<h1>Node.js __VERSION__ Documentation</h1>
+<divclass="header-container">
+<h1>Node.js __VERSION__ Documentation</h1>
+<buttonclass="theme-toggle-btn" id="theme-toggle-btn" hidden>
+<svgxmlns="http://www.w3.org/2000/svg" class="icon dark-icon" height="24" width="24">
+<pathfill="none" d="M0 0h24v24H0z" />
+<pathd="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"/>
+<pathd="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"/>
+</svg>
+<svgxmlns="http://www.w3.org/2000/svg" class="icon light-icon" height="24" width="24">
+<pathd="M0 0h24v24H0z" fill="none" />
+<pathd="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"/>
+</svg>
+</button>
+</div>
 <divid="gtoc">
 <ul>
 <li>
@@ -54,4 +67,40 @@ <h2>Table of Contents</h2>
 </div>
 </div>
 </body>
+<script>
+'use strict';
+{
+constkCustomPreference='customDarkTheme';
+constuserSettings=sessionStorage.getItem(kCustomPreference);
+constthemeToggleButton=document.getElementById('theme-toggle-btn');
+if(userSettings===null&&window.matchMedia){
+constmq=window.matchMedia('(prefers-color-scheme: dark)');
+if('onchange'inmq){
+functionmqChangeListener(e){
+document.body.classList.toggle('dark-mode',e.matches);
+}
+mq.addEventListener('change',mqChangeListener);
+if(themeToggleButton){
+themeToggleButton.addEventListener('click',function(){
+mq.removeEventListener('change',mqChangeListener);
+},{once: true});
+}
+}
+if(mq.matches){
+document.body.classList.add('dark-mode');
+}
+}elseif(userSettings==='true'){
+document.body.classList.add('dark-mode');
+}
+if(themeToggleButton){
+themeToggleButton.hidden=false;
+themeToggleButton.addEventListener('click',function(){
+sessionStorage.setItem(
+kCustomPreference,
+document.body.classList.toggle('dark-mode')
+);
+});
+}
+}
+</script>
 </html>