cmd/pkgserver: fix dark mode in test web UI

cmd/pkgserver/ui/static/success-closed.svg

@@ -1,6 +1,16 @@
 <?xml version="1.0"?>
 <!-- See failure-open.svg for an explanation of the view box dimensions. -->
 <svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20,-20 160 130">
+    <style>
+    .adaptive-stroke {
+        stroke: black;
+    }
+    @media (prefers-color-scheme: dark) {
+        .adaptive-stroke {
+            stroke: ghostwhite;
+        }
+    }
+    </style>
     <!-- When updating this triangle, also update the other five SVGs. -->
-    <polygon points="0,0 100,50 0,100" fill="none" stroke="black" stroke-width="15" stroke-linejoin="round"/>
+    <polygon points="0,0 100,50 0,100" fill="none" class="adaptive-stroke" stroke-width="15" stroke-linejoin="round"/>
 </svg>

cmd/pkgserver/ui/static/success-open.svg

@@ -1,6 +1,16 @@
 <?xml version="1.0"?>
 <!-- See failure-open.svg for an explanation of the view box dimensions. -->
 <svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20,-20 160 130">
+    <style>
+    .adaptive-stroke {
+        stroke: black;
+    }
+    @media (prefers-color-scheme: dark) {
+        .adaptive-stroke {
+            stroke: ghostwhite;
+        }
+    }
+    </style>
     <!-- When updating this triangle, also update the other five SVGs. -->
-    <polygon points="0,0 100,0 50,100" fill="none" stroke="black" stroke-width="15" stroke-linejoin="round"/>
+    <polygon points="0,0 100,0 50,100" fill="none" class="adaptive-stroke" stroke-width="15" stroke-linejoin="round"/>
 </svg>

cmd/pkgserver/ui/static/test.scss

@@ -1,3 +1,19 @@
+:root {
+    --bg: #d3d3d3;
+    --fg: black;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg: #2c2c2c;
+        --fg: ghostwhite;
+    }
+}
+
+html {
+    background-color: var(--bg);
+    color: var(--fg);
+}
 h1, p, summary {
     font-family: sans-serif;
 }
@@ -9,7 +25,7 @@ h1, p, summary {
 details.test-node {
     margin-left: 1rem;
     padding: 0.2rem 0.5rem;
-    border-left: 2px dashed black;
+    border-left: 2px dashed var(--fg);
     > summary {
         cursor: pointer;
     }
@@ -21,7 +37,7 @@ details.test-node {
          * individuals, it's better than no indication of a test's state.
          * See: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::marker#browser_compatibility
          */
-        color: black;
+        color: var(--fg);
         content: url("/static/success-closed.svg");
     }
     &.success[open] > summary::marker {