cmd/pkgserver: fix dark mode in test web UI

cmd/pkgserver/ui.go

@@ -28,15 +28,24 @@ func serveStaticContent(w http.ResponseWriter, r *http.Request) {
 	case "/static/test.js":
 		http.ServeFileFS(w, r, content, "ui/static/test.js")
 	case "/static/test.css":
-		http.ServeFileFS(w, r, content, "ui/static/test.css")
+		darkTheme := r.CookiesNamed("dark_theme")
+		if len(darkTheme) > 0 && darkTheme[0].Value == "true" {
+			http.ServeFileFS(w, r, content, "ui/static/test_dark.css")
+		} else {
+			http.ServeFileFS(w, r, content, "ui/static/test_light.css")
+		}
 	case "/static/all_tests.js":
 		http.ServeFileFS(w, r, content, "ui/static/all_tests.js")
 	case "/static/test_tests.js":
 		http.ServeFileFS(w, r, content, "ui/static/test_tests.js")
-	case "/static/success-closed.svg":
+	case "/static/success-closed-white.svg":
-		http.ServeFileFS(w, r, content, "ui/static/success-closed.svg")
+		http.ServeFileFS(w, r, content, "ui/static/success-closed-white.svg")
-	case "/static/success-open.svg":
+	case "/static/success-open-white.svg":
-		http.ServeFileFS(w, r, content, "ui/static/success-open.svg")
+		http.ServeFileFS(w, r, content, "ui/static/success-open-white.svg")
+	case "/static/success-closed-black.svg":
+		http.ServeFileFS(w, r, content, "ui/static/success-closed-black.svg")
+	case "/static/success-open-black.svg":
+		http.ServeFileFS(w, r, content, "ui/static/success-open-black.svg")
 	case "/static/failure-closed.svg":
 		http.ServeFileFS(w, r, content, "ui/static/failure-closed.svg")
 	case "/static/failure-open.svg":

cmd/pkgserver/ui/static/_test_common.scss

@@ -1,3 +1,8 @@
+html {
+    background-color: var(--bg);
+    color: var(--fg);
+}
+
 h1, p, summary {
     font-family: sans-serif;
 }
@@ -9,7 +14,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,11 +26,8 @@ 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");
+        /* content set in theme-specific file. */
-    }
-    &.success[open] > summary::marker {
-        content: url("/static/success-open.svg");
     }
     &.failure > summary::marker {
         color: red;

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

@@ -1,7 +1,7 @@
 <?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">
-    <!-- This triangle should match success-closed.svg, fill and stroke color notwithstanding. -->
+    <!-- This triangle should match success-closed-black.svg, fill and stroke color notwithstanding. -->
     <polygon points="0,0 100,50 0,100" fill="red" stroke="red" stroke-width="15" stroke-linejoin="round"/>
     <!--
      ! y-coordinates go before x-coordinates here to highlight the difference

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

@@ -19,7 +19,7 @@
  ! simplest and most effective solution is to reduce the height of the view box
  ! from 140 to 130, thereby removing some of the bottom padding present.
  !
- ! All six SVGs use the same view box (and indeed, they refer to this comment)
+ ! All eight SVGs use the same view box (and indeed, they refer to this comment)
  ! so that they all appear to be the same size and position relative to each
  ! other on the DOM—indeed, the view box dimensions, alongside the width,
  ! directly control their placement on the DOM.
@@ -27,7 +27,7 @@
  ! TL;DR: CSS is janky, overflow is weird, and SVG is awesome!
  -->
 <svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20,-20 160 130">
-    <!-- This triangle should match success-open.svg, fill and stroke color notwithstanding. -->
+    <!-- This triangle should match success-open-black.svg, fill and stroke color notwithstanding. -->
     <polygon points="0,0 100,0 50,100" fill="red" stroke="red" stroke-width="15" stroke-linejoin="round"/>
     <!-- See the comment in failure-closed.svg before modifying this. -->
     <line x1="30" y1="10" x2="70" y2="50" stroke="white" stroke-width="16"/>

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

@@ -1,7 +1,7 @@
 <?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">
-    <!-- This triangle should match success-closed.svg, fill and stroke color notwithstanding. -->
+    <!-- This triangle should match success-closed-black.svg, fill and stroke color notwithstanding. -->
     <polygon points="0,0 100,50 0,100" fill="blue" stroke="blue" stroke-width="15" stroke-linejoin="round"/>
     <!--
      ! This path is extremely similar to the one in skip-open.svg; before

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

@@ -1,7 +1,7 @@
 <?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">
-    <!-- This triangle should match success-open.svg, fill and stroke color notwithstanding. -->
+    <!-- This triangle should match success-open-black.svg, fill and stroke color notwithstanding. -->
     <polygon points="0,0 100,0 50,100" fill="blue" stroke="blue" stroke-width="15" stroke-linejoin="round"/>
     <!--
      ! This path is extremely similar to the one in skip-closed.svg; before

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

@@ -1,6 +1,6 @@
 <?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">
-    <!-- When updating this triangle, also update the other five SVGs. -->
+    <!-- When updating this triangle, also update the other seven SVGs. -->
     <polygon points="0,0 100,50 0,100" fill="none" stroke="black" stroke-width="15" stroke-linejoin="round"/>
 </svg>

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

@@ -0,0 +1,6 @@
+<?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">
+    <!-- This triangle should match success-closed-black.svg, stroke color notwithstanding. -->
+    <polygon points="0,0 100,50 0,100" fill="none" stroke="ghostwhite" stroke-width="15" stroke-linejoin="round"/>
+</svg>

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

@@ -1,6 +1,6 @@
 <?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">
-    <!-- When updating this triangle, also update the other five SVGs. -->
+    <!-- When updating this triangle, also update the other seven SVGs. -->
     <polygon points="0,0 100,0 50,100" fill="none" stroke="black" stroke-width="15" stroke-linejoin="round"/>
 </svg>

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

@@ -0,0 +1,6 @@
+<?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">
+    <!-- This triangle should match success-open-black.svg, stroke color notwithstanding. -->
+    <polygon points="0,0 100,0 50,100" fill="none" stroke="ghostwhite" stroke-width="15" stroke-linejoin="round"/>
+</svg>

cmd/pkgserver/ui/static/test_dark.scss

@@ -0,0 +1,19 @@
+@use "test_common";
+
+:root {
+    --bg: #2c2c2c;
+    --fg: ghostwhite;
+}
+
+/*
+ * The color of an SVG in a content: cannot be controlled via CSS as it's not
+ * present in the DOM, so use duplicated versions.
+ */
+details.test-node.success {
+    &[open] > summary::marker {
+        content: url("/static/success-open-white.svg");
+    }
+    > summary::marker {
+        content: url("/static/success-closed-white.svg");
+    }
+}

cmd/pkgserver/ui/static/test_light.scss

@@ -0,0 +1,19 @@
+@use "test_common";
+
+:root {
+    --bg: #d3d3d3;
+    --fg: black;
+}
+
+/*
+ * The color of an SVG in a content: cannot be controlled via CSS as it's not
+ * present in the DOM, so use duplicated versions.
+ */
+details.test-node.success {
+    &[open] > summary::marker {
+        content: url("/static/success-open-black.svg");
+    }
+    > summary::marker {
+        content: url("/static/success-closed-black.svg");
+    }
+}

cmd/pkgserver/ui/test.html

@@ -3,7 +3,6 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="static/style.css">
     <link rel="stylesheet" href="static/test.css">
     <title>PkgServer Tests</title>
 </head>

cmd/pkgserver/ui_full.go

@@ -4,6 +4,6 @@ package main
 
 import "embed"
 
-//go:generate sh -c "sass ui/static/dark.scss ui/static/dark.css && sass ui/static/light.scss ui/static/light.css && sass ui/static/test.scss ui/static/test.css && tsc -p ui/static"
+//go:generate sh -c "sass ui/static/dark.scss ui/static/dark.css && sass ui/static/light.scss ui/static/light.css && sass ui/static/test_light.scss ui/static/test_light.css && sass ui/static/test_dark.scss ui/static/test_dark.css && tsc -p ui/static"
 //go:embed ui/*
 var content embed.FS