Repository: denoland/deno
Pull request: Dark mode

<!--
Before submitting a PR read https://deno.land/manual.html#contributing
-->

This is part one of implementing [this request](https://github.com/denoland/registry/issues/97#issuecomment-503270284) by @bartlomieju:

> What about all those people (including me) who prefer dark mode? Ideally we should aspire to have a toggle that switches color scheme 😉

It wasn‘t terribly hard to implement, and there should be no changes to the appearance of the website in light mode.

Two points:

- If IE compatibility is important, I can refactor the code to not use CSS variables.
- I selected the dark theme from highlight.js that best matched the light theme, but it’s not perfect. If you’re willing to switch to Atom One Light/Dark (or any other combination of light and dark themes), they would match better.

To update the registry pages, this PR should be merged and the new theme should be added to the generated code display page in `denoland/registry`. I’m willing to take that on once this is approved.

Changed files:
filename: website/index.html
patch: @@ -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" />

filename: website/manual.html
patch: @@ -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" />

filename: website/style.css
patch: @@ -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 {

filename: website/style_guide.html
patch: @@ -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" />