From 90dba643cf3d4f3960b348af8328d93ba1479be2 Mon Sep 17 00:00:00 2001 From: Julien Danjou Date: Mon, 1 Jun 2026 17:36:30 +0200 Subject: [PATCH] fix(styles): make GraphViz graph-level labels readable in dark mode MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit GraphViz diagrams are rendered to static SVG at build time, so a graph-level `label` (e.g. "Merge Queue" on the batches page) becomes a `` element with no `fill` attribute and defaults to black. That is fine on the light page background but invisible in dark mode. Add a CSS rule that colors the graph-level label with `--theme-text` so it adapts to the active theme. The `svg.graph > g.graph > text` selector targets only the top-level caption — node labels (`g.node > text`) and cluster labels (`g.cluster > text`, which carry their own colors on filled backgrounds) are unaffected. This also fixes the same latent issue on other diagrams with top-level captions (scopes, parallel scopes, monorepo CI, performance, etc.). Co-Authored-By: Claude Opus 4.8 Change-Id: I861269fc345aff13be984af43b88ab3f37571a89 --- src/styles/index.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/styles/index.css b/src/styles/index.css index 645447e522..f971ec574c 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -809,6 +809,14 @@ svg.graph > g.graph > polygon { stroke: none !important; } +/* The graph-level label (e.g. "Merge Queue") is a directly under g.graph, + sitting on the transparent page background. Graphviz bakes it as black, which is + unreadable in dark mode. Use the theme text color so it adapts. Cluster and node + labels live in their own and keep the colors set in the diagram. */ +svg.graph > g.graph > text { + fill: var(--theme-text); +} + hr { border: none; border-bottom: 1px solid var(--theme-border-color);