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

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" />

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" />

website/style.css

+: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 {

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" />