feat(dev-server): dark mode support (#5642)

Author: sean-perkins

src/dev-server/templates/directory-index.html

@@ -9,6 +9,9 @@
       * {
         box-sizing: border-box;
       }
+      html {
+        color-scheme: light dark;
+      }
       body {
         padding: 40px 140px;
         margin: 0;
@@ -43,7 +46,9 @@
         padding: 0;
       }
       li a {
-        display: inline-block;
+        display: flex;
+        align-items: center;
+        gap: 6px;
         margin: 0;
         padding: 6px 12px;
         min-width: 50%;
@@ -53,22 +58,28 @@
       }
       li a:focus,
       li a:hover {
+        color: #555;
         background: rgba(221, 235, 255, 0.65);
       }
       .icon {
         display: inline-block;
-        width: 20px;
+        width: 14px;
         min-height: 14px;
         opacity: 0.6;
-        background-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        -webkit-mask-repeat: no-repeat;
       }
       .directory .icon {
-        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjEzLjMzOCA5Nkg3NC42NjZDNTEuMTk3IDk2IDMyIDExNS4xOTggMzIgMTM4LjY2N3YyMzQuNjY2QzMyIDM5Ni44MDIgNTEuMTk3IDQxNiA3NC42NjYgNDE2aDM2Mi42NjhDNDYwLjgwMyA0MTYgNDgwIDM5Ni44MDIgNDgwIDM3My4zMzNWMTg2LjY2N0M0ODAgMTYzLjE5OCA0NjAuODAzIDE0NCA0MzcuMzM0IDE0NEgyNTYuMDA2bC00Mi42NjgtNDh6Ii8+PC9zdmc+);
+        mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjEzLjMzOCA5Nkg3NC42NjZDNTEuMTk3IDk2IDMyIDExNS4xOTggMzIgMTM4LjY2N3YyMzQuNjY2QzMyIDM5Ni44MDIgNTEuMTk3IDQxNiA3NC42NjYgNDE2aDM2Mi42NjhDNDYwLjgwMyA0MTYgNDgwIDM5Ni44MDIgNDgwIDM3My4zMzNWMTg2LjY2N0M0ODAgMTYzLjE5OCA0NjAuODAzIDE0NCA0MzcuMzM0IDE0NEgyNTYuMDA2bC00Mi42NjgtNDh6Ii8+PC9zdmc+);
+        -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjEzLjMzOCA5Nkg3NC42NjZDNTEuMTk3IDk2IDMyIDExNS4xOTggMzIgMTM4LjY2N3YyMzQuNjY2QzMyIDM5Ni44MDIgNTEuMTk3IDQxNiA3NC42NjYgNDE2aDM2Mi42NjhDNDYwLjgwMyA0MTYgNDgwIDM5Ni44MDIgNDgwIDM3My4zMzNWMTg2LjY2N0M0ODAgMTYzLjE5OCA0NjAuODAzIDE0NCA0MzcuMzM0IDE0NEgyNTYuMDA2bC00Mi42NjgtNDh6Ii8+PC9zdmc+);
         background-position: 0px 2px;
+        background-color: currentColor;
       }
       .file .icon {
-        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjg4IDQ4SDEzNmMtMjIuMDkyIDAtNDAgMTcuOTA4LTQwIDQwdjMzNmMwIDIyLjA5MiAxNy45MDggNDAgNDAgNDBoMjQwYzIyLjA5MiAwIDQwLTE3LjkwOCA0MC00MFYxNzZMMjg4IDQ4em0tMTYgMTQ0VjgwbDExMiAxMTJIMjcyeiIvPjwvc3ZnPg==);
+        mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjg4IDQ4SDEzNmMtMjIuMDkyIDAtNDAgMTcuOTA4LTQwIDQwdjMzNmMwIDIyLjA5MiAxNy45MDggNDAgNDAgNDBoMjQwYzIyLjA5MiAwIDQwLTE3LjkwOCA0MC00MFYxNzZMMjg4IDQ4em0tMTYgMTQ0VjgwbDExMiAxMTJIMjcyeiIvPjwvc3ZnPg==);
+        -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjg4IDQ4SDEzNmMtMjIuMDkyIDAtNDAgMTcuOTA4LTQwIDQwdjMzNmMwIDIyLjA5MiAxNy45MDggNDAgNDAgNDBoMjQwYzIyLjA5MiAwIDQwLTE3LjkwOCA0MC00MFYxNzZMMjg4IDQ4em0tMTYgMTQ0VjgwbDExMiAxMTJIMjcyeiIvPjwvc3ZnPg==);
         background-position: 0px 2px;
+        background-color: currentColor;
       }
       li a:hover .icon {
         opacity: 1;
@@ -107,18 +118,51 @@
           background: #e0e0e0;
         }
         li a {
-          display: block;
+          display: flex;
           border-radius: 0;
           padding: 15px 10px;
         }
         .icon {
-          width: 32px;
+          width: 24px;
+          min-width: 24px;
           min-height: 24px;
         }
         .directory .icon {
           background-position: 0px 4px;
         }
       }
+
+      @media (prefers-color-scheme: dark) { 
+        body {
+          background: #000;
+        }
+        h1 {
+          color: #eaeaea;
+        }
+        a {
+          color: #ccc;
+        }
+        a:hover {
+          color: #eaeaea;
+        }
+        li a:focus,
+        li a:hover {
+          color: #ccc;
+          background: #1c1c1c;
+        }
+      }
+
+      @media (max-width: 768px) and (prefers-color-scheme: dark) {
+        ul {
+          border-top: 1px solid #333;
+        }
+        li {
+          border-bottom: 1px solid #333;
+        }
+        li:nth-child(odd) {
+          background: #333;
+        }
+      }
     </style>
     <link rel="shortcut icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAB2AAAAdgB+lymcgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFGSURBVHic7dm9TcNQFMXxPzRpaZGYAEIqZkERkzAFSwARSyCGgA2QAqGhTZqYIrJkzEP4GfueyD4/6TavuufEH1IMZmZmZmZm382ABfAOFB3MJzANTfAPV8CGboJX5xU4CczRyox+wpfzDByFpWlhQX/hy3kCJlGBcnV1z/81D8BhUKYsW2IKKICboExZosJHzBtwT+bbR710H7MG5qmwB78UMEQb4AJ4qR7u5UOoJxPgun44pisAdm+44+rB2AooqF31Y7oFIPGDj62AH1yAegE1F6BeQM0FqBdQcwHqBdRcgHoBNRegXkDNBagXUHMB6gXUXIB6ATUXoF5ALVXAkP8W39YPUgV8BCyisqofpAp4DFhEpVG2c3ZfU9VfdPv4QnzWtKn5wEpYA5dNw5emwB2w3IMAbWcJ3AKnueHNzMzMzGzYvgAGC6SjvNl9rAAAAABJRU5ErkJggg==">
   </head>

src/dev-server/templates/initial-load.html

@@ -25,6 +25,9 @@
     * {
       box-sizing: border-box;
     }
+    html {
+      color-scheme: dark light;
+    }
     body {
       position: absolute;
       padding: 0;
@@ -41,7 +44,7 @@
       margin: auto;
       max-width: 700px;
       border-radius: 3px;
-      background: rgba(0,0,0,.9);
+      background: rgba(0, 0, 0, .9);
       -webkit-transform: translate3d(0px, -60px, 0px);
       transform: translate3d(0px, -60px, 0px);
       -webkit-transition: -webkit-transform 75ms ease-out;
@@ -122,9 +125,14 @@
       margin: auto;
       max-width: 700px;
       padding: 32px;
-      color: #5a5a5a;
       line-height: 1.5;
     }
+
+    @media (prefers-color-scheme: dark) { 
+      .toast {
+        background: rgb(49, 49, 49, .9);
+      }
+    }
   </style>
 </head>
 <body>