From 1e8fc8e20cb72ddf8d7744d021fea5d8dbed4fed Mon Sep 17 00:00:00 2001
From: Kat <00-kat@proton.me>
Date: Sun, 22 Mar 2026 06:14:10 +1100
Subject: [PATCH] cmd/pkgserver: fix dark mode in test web UI

---
 cmd/pkgserver/ui.go                           | 19 ++++++++++++++-----
 .../static/{test.scss => _test_common.scss}   | 14 ++++++++------
 cmd/pkgserver/ui/static/failure-closed.svg    |  2 +-
 cmd/pkgserver/ui/static/failure-open.svg      |  4 ++--
 cmd/pkgserver/ui/static/skip-closed.svg       |  2 +-
 cmd/pkgserver/ui/static/skip-open.svg         |  2 +-
 ...ss-closed.svg => success-closed-black.svg} |  2 +-
 .../ui/static/success-closed-white.svg        |  6 ++++++
 ...uccess-open.svg => success-open-black.svg} |  2 +-
 .../ui/static/success-open-white.svg          |  6 ++++++
 cmd/pkgserver/ui/static/test_dark.scss        | 19 +++++++++++++++++++
 cmd/pkgserver/ui/static/test_light.scss       | 19 +++++++++++++++++++
 cmd/pkgserver/ui/test.html                    |  1 -
 cmd/pkgserver/ui_full.go                      |  2 +-
 14 files changed, 80 insertions(+), 20 deletions(-)
 rename cmd/pkgserver/ui/static/{test.scss => _test_common.scss} (86%)
 rename cmd/pkgserver/ui/static/{success-closed.svg => success-closed-black.svg} (79%)
 create mode 100644 cmd/pkgserver/ui/static/success-closed-white.svg
 rename cmd/pkgserver/ui/static/{success-open.svg => success-open-black.svg} (79%)
 create mode 100644 cmd/pkgserver/ui/static/success-open-white.svg
 create mode 100644 cmd/pkgserver/ui/static/test_dark.scss
 create mode 100644 cmd/pkgserver/ui/static/test_light.scss

diff --git a/cmd/pkgserver/ui.go b/cmd/pkgserver/ui.go
index 4a09edf0..39b66fd6 100644
--- a/cmd/pkgserver/ui.go
+++ b/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":
-		http.ServeFileFS(w, r, content, "ui/static/success-closed.svg")
-	case "/static/success-open.svg":
-		http.ServeFileFS(w, r, content, "ui/static/success-open.svg")
+	case "/static/success-closed-white.svg":
+		http.ServeFileFS(w, r, content, "ui/static/success-closed-white.svg")
+	case "/static/success-open-white.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":
diff --git a/cmd/pkgserver/ui/static/test.scss b/cmd/pkgserver/ui/static/_test_common.scss
similarity index 86%
rename from cmd/pkgserver/ui/static/test.scss
rename to cmd/pkgserver/ui/static/_test_common.scss
index 1b0e4419..97f48a7d 100644
--- a/cmd/pkgserver/ui/static/test.scss
+++ b/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;
-        content: url("/static/success-closed.svg");
-    }
-    &.success[open] > summary::marker {
-        content: url("/static/success-open.svg");
+        color: var(--fg);
+        /* content set in theme-specific file. */
     }
     &.failure > summary::marker {
         color: red;
diff --git a/cmd/pkgserver/ui/static/failure-closed.svg b/cmd/pkgserver/ui/static/failure-closed.svg
index c08068b3..a492d4e8 100644
--- a/cmd/pkgserver/ui/static/failure-closed.svg
+++ b/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
diff --git a/cmd/pkgserver/ui/static/failure-open.svg b/cmd/pkgserver/ui/static/failure-open.svg
index 891e61ae..e5021739 100644
--- a/cmd/pkgserver/ui/static/failure-open.svg
+++ b/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"/>
diff --git a/cmd/pkgserver/ui/static/skip-closed.svg b/cmd/pkgserver/ui/static/skip-closed.svg
index 61223376..5e95df99 100644
--- a/cmd/pkgserver/ui/static/skip-closed.svg
+++ b/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
diff --git a/cmd/pkgserver/ui/static/skip-open.svg b/cmd/pkgserver/ui/static/skip-open.svg
index bc84308b..783e3beb 100644
--- a/cmd/pkgserver/ui/static/skip-open.svg
+++ b/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
diff --git a/cmd/pkgserver/ui/static/success-closed.svg b/cmd/pkgserver/ui/static/success-closed-black.svg
similarity index 79%
rename from cmd/pkgserver/ui/static/success-closed.svg
rename to cmd/pkgserver/ui/static/success-closed-black.svg
index c2c5584a..3288e3a2 100644
--- a/cmd/pkgserver/ui/static/success-closed.svg
+++ b/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>
diff --git a/cmd/pkgserver/ui/static/success-closed-white.svg b/cmd/pkgserver/ui/static/success-closed-white.svg
new file mode 100644
index 00000000..62439432
--- /dev/null
+++ b/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>
diff --git a/cmd/pkgserver/ui/static/success-open.svg b/cmd/pkgserver/ui/static/success-open-black.svg
similarity index 79%
rename from cmd/pkgserver/ui/static/success-open.svg
rename to cmd/pkgserver/ui/static/success-open-black.svg
index 7526745a..88ee00aa 100644
--- a/cmd/pkgserver/ui/static/success-open.svg
+++ b/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>
diff --git a/cmd/pkgserver/ui/static/success-open-white.svg b/cmd/pkgserver/ui/static/success-open-white.svg
new file mode 100644
index 00000000..0abed34e
--- /dev/null
+++ b/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>
diff --git a/cmd/pkgserver/ui/static/test_dark.scss b/cmd/pkgserver/ui/static/test_dark.scss
new file mode 100644
index 00000000..3e510678
--- /dev/null
+++ b/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");
+    }
+}
diff --git a/cmd/pkgserver/ui/static/test_light.scss b/cmd/pkgserver/ui/static/test_light.scss
new file mode 100644
index 00000000..2be0c093
--- /dev/null
+++ b/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");
+    }
+}
diff --git a/cmd/pkgserver/ui/test.html b/cmd/pkgserver/ui/test.html
index 1ff11f92..ade2c20b 100644
--- a/cmd/pkgserver/ui/test.html
+++ b/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>
diff --git a/cmd/pkgserver/ui_full.go b/cmd/pkgserver/ui_full.go
index 837d64d8..49f22d17 100644
--- a/cmd/pkgserver/ui_full.go
+++ b/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