kat/hakurei
1
0
Fork 0
forked from rosa/hakurei
Code Pull Requests Activity

cmd/pkgserver: fix dark mode in test web UI

Browse Source
This commit is contained in:
Kat
2026-03-22 06:14:10 +11:00
parent 96acdd696c
commit 1e8fc8e20c
14 changed files with 80 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
cmd/pkgserver/ui.go
View File

@@ -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":

14
cmd/pkgserver/ui/static/test.scss → cmd/pkgserver/ui/static/_test_common.scss
View File

@@ -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;

2
cmd/pkgserver/ui/static/failure-closed.svg
View File

@@ -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
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 788 B

After

Width:  |  Height:  |  Size: 794 B

4
cmd/pkgserver/ui/static/failure-open.svg
View File

@@ -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"/>

2
cmd/pkgserver/ui/static/skip-closed.svg
View File

@@ -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
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 812 B

After

Width:  |  Height:  |  Size: 818 B

2
cmd/pkgserver/ui/static/skip-open.svg
View File

@@ -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
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 812 B

After

Width:  |  Height:  |  Size: 818 B

2
cmd/pkgserver/ui/static/success-closed.svg → cmd/pkgserver/ui/static/success-closed-black.svg
View File

@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 369 B

After

Width:  |  Height:  |  Size: 370 B

6
cmd/pkgserver/ui/static/success-closed-white.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 395 B

2
cmd/pkgserver/ui/static/success-open.svg → cmd/pkgserver/ui/static/success-open-black.svg
View File

@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 369 B

After

Width:  |  Height:  |  Size: 370 B

6
cmd/pkgserver/ui/static/success-open-white.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 393 B

19
cmd/pkgserver/ui/static/test_dark.scss Normal file
View File

@@ -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");
}
}

19
cmd/pkgserver/ui/static/test_light.scss Normal file
View File

@@ -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");
}
}

1
cmd/pkgserver/ui/test.html
View File

@@ -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>

2
cmd/pkgserver/ui_full.go
View File

@@ -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