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>
nodejs · May 1, 2021 · 19e6120 · 19e6120
1 parent 8620458
commit 19e6120
Show file tree

Hide file tree

Showing 3 changed files with 185 additions and 28 deletions.
diff --git a/doc/api_assets/hljs.css b/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);
+}
diff --git a/doc/api_assets/style.css b/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-mode code,
+.dark-mode tt {
+  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, h1 code { 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: 1px 3px;
 }
 
 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: 1px currentColor 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: 0 0 2px 2px;
   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: 0 0 1rem;
   padding: 1rem;
   line-height: 1.5;
 }
 
 .api_stability * {
-  color: #fff !important;
+  color: var(--white) !important;
 }
 
 .api_stability a {
@@ -192,23 +244,23 @@ ol.version-picker li:last-child a {
 .api_stability a:hover,
 .api_stability a:active,
 .api_stability a:focus {
-  background-color: rgba(255, 255, 255, .4);
+  background-color: var(--api-stability-links-bg);
 }
 
 .api_stability a code {
   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 {
 }
 
 #intro a {
-  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: 0 0 1rem;
 }
 
@@ -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: 1px 3px;
@@ -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 {
 #column2 ul {
   list-style: none;
   margin: .9rem 0 .5rem;
-  background-color: #333;
+  background-color: var(--color-fill-side-nav);
 }
 
 #column2 > :first-child {
@@ -532,23 +584,23 @@ a code {
 }
 
 #column2 ul li a {
-  color: #ccc;
+  color: var(--color-text-nav);
   border-radius: 0;
 }
 
 #column2 ul li a.active,
 #column2 ul li a.active:hover,
 #column2 ul li a.active:focus {
   font-weight: 700;
-  color: #fff;
+  color: var(--white);
   background-color: transparent;
 }
 
 #intro a:hover,
 #intro a:focus,
 #column2 ul li a:hover,
 #column2 ul li a: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: 0 1px 1px rgba(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.5rem 0 1rem;
+  justify-content: space-between;
+}
+
+.header-container h1 {
+  margin: 0;
+}
+
+.theme-toggle-btn {
+  border: none;
+  background: transparent;
+  outline: var(--brand3) dotted 2px;
+}
+
 @media only 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;

diff --git a/doc/template.html b/doc/template.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
@@ -23,7 +23,20 @@
 
     <div id="column1" data-id="__ID__" class="interior">
       <header>
-        <h1>Node.js __VERSION__ Documentation</h1>
+        <div class="header-container">
+          <h1>Node.js __VERSION__ Documentation</h1>
+          <button class="theme-toggle-btn" id="theme-toggle-btn" hidden>
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon dark-icon" height="24" width="24">
+              <path fill="none" d="M0 0h24v24H0z" />
+              <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"/>
+              <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"/>
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon light-icon" height="24" width="24">
+              <path d="M0 0h24v24H0z" fill="none" />
+              <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"/>
+            </svg>
+          </button>
+        </div>
         <div id="gtoc">
           <ul>
             <li>
@@ -54,4 +67,40 @@ <h2>Table of Contents</h2>
     </div>
   </div>
 </body>
+<script>
+    'use strict';
+    {
+      const kCustomPreference = 'customDarkTheme';
+      const userSettings = sessionStorage.getItem(kCustomPreference);
+      const themeToggleButton = document.getElementById('theme-toggle-btn');
+      if (userSettings === null && window.matchMedia) {
+        const mq = window.matchMedia('(prefers-color-scheme: dark)');
+        if ('onchange' in mq) {
+          function mqChangeListener(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');
+        }
+      } else if (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>