website: use css variables and prefers-color-scheme (#2547)

This uses `prefers-color-scheme: dark` to automatically switch 
to dark mode if the user specifies it in their system settings. 
Dark mode is supported in Firefox 67, Chrome 76, Safari 12.1,
and iOS 13 as of this commit, but the current status can be 
checked here: https://caniuse.com/#feat=prefers-color-scheme

Additionally, this uses CSS Variables to implement the color-switching
mechanism. This isn’t supported in IE, but the site degrades
reasonably well with them disabled.
Support table: https://caniuse.com/#feat=css-variables

4 files changed, 37 insertions, 8 deletions

diff --git a/website/index.html b/website/index.html
index 2920f1c2c..66b12871c 100644
--- a/website/index.html
+++ b/website/index.html
@@ -6,6 +6,7 @@
     <link rel="shortcut icon" href="favicon.ico">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/default.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/github-gist.min.css">
+    <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/monokai-sublime.min.css">
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/highlight.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/languages/typescript.min.js"></script>
     <link rel="stylesheet" href="style.css" />
diff --git a/website/manual.html b/website/manual.html
index 6ac776770..3caa2c083 100644
--- a/website/manual.html
+++ b/website/manual.html
@@ -6,6 +6,7 @@
     <link rel="shortcut icon" href="favicon.ico">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/default.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/github-gist.min.css">
+    <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/monokai-sublime.min.css">
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/highlight.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/languages/typescript.min.js"></script>
     <link rel="stylesheet" href="style.css" />
diff --git a/website/style.css b/website/style.css
index 07bb41a03..5f377663b 100644
--- a/website/style.css
+++ b/website/style.css
@@ -1,6 +1,32 @@
+:root {
+  --text-color: #444;
+  --background-color: #f0f0f0;
+  --link-color: #106ad5;
+  --table-border: #bbb;
+  --pre-color: #161616;
+  --pre-link-color: #001631;
+  --pre-background: rgba(36, 126, 233, 0.1);
+  --code-color: #333;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color: #444;
+    --text-color: #f0f0f0;
+    --link-color: #4498ff;
+    --pre-color: #e8e8e8;	
+    --pre-link-color: #cee4ff;
+    --code-color: #ccc;
+  }
+  
+  #logo {
+    filter: invert(); 
+  }
+}
+
 body {
-  color: #444;
-  background: #f0f0f0;
+  color: var(--text-color);
+  background: var(--background-color);
   padding: 0;
 
   line-height: 1.5;
@@ -33,7 +59,7 @@ table {
 td, th {
   font-weight: normal;
   text-align: center;
-  border: 1px dotted #bbb;
+  border: 1px dotted var(--table-border);
   padding: 4px;
 }
 
@@ -44,11 +70,11 @@ svg {
 }
 
 a {
-  color: #106ad5;
+  color: var(--link-color);
 }
 
 pre a {
-  color: #001631;
+  color: var(--pre-link-color);
 }
 
 h2 a, h3 a {
@@ -64,8 +90,8 @@ h3:hover a  {
 
 pre {
   /* background: rgba(36, 126, 233, 0.03); */
-  color: #161616;
-  background: rgba(36, 126, 233, 0.1);
+  color: var(--pre-color);
+  background: var(--pre-background);
   padding: 15px;
   white-space: pre-wrap;
   word-break: break-all;
@@ -96,7 +122,7 @@ header h1 {
 code {
   background: rgba(36, 126, 233, 0.1);
   padding: 2px 5px;
-  color: #333;
+  color: var(--code-color);
 }
 
 .hljs {
diff --git a/website/style_guide.html b/website/style_guide.html
index bd0f4ed00..667a2eac7 100644
--- a/website/style_guide.html
+++ b/website/style_guide.html
@@ -6,6 +6,7 @@
     <link rel="shortcut icon" href="favicon.ico">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/default.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/github-gist.min.css">
+    <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/monokai-sublime.min.css">
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/highlight.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/languages/typescript.min.js"></script>
     <link rel="stylesheet" href="style.css" />