fix(styles): make GraphViz graph-level labels readable in dark mode#11697
Draft
jd wants to merge 1 commit into
Draft
fix(styles): make GraphViz graph-level labels readable in dark mode#11697jd wants to merge 1 commit into
jd wants to merge 1 commit into
Conversation
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 `<text>` 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 <noreply@anthropic.com> Change-Id: I861269fc345aff13be984af43b88ab3f37571a89
Contributor
Merge ProtectionsYour pull request matches the following merge protections and will not be merged until they are valid. 🔴 👀 Review RequirementsWaiting for
This rule is failing.
🔴 🔎 ReviewsWaiting for
This rule is failing.
🟢 🤖 Continuous IntegrationWonderful, this rule succeeded.
🟢 Enforce conventional commitWonderful, this rule succeeded.Make sure that we follow https://www.conventionalcommits.org/en/v1.0.0/
🟢 📕 PR descriptionWonderful, this rule succeeded.
|
There was a problem hiding this comment.
Pull request overview
This PR fixes an accessibility/legibility issue where GraphViz “graph-level” captions in statically-rendered SVGs default to black text, making them unreadable on dark backgrounds. It does so by applying the site theme’s text color to only the top-level <text> element directly under g.graph, leaving node/cluster labels unchanged.
Changes:
- Add a CSS rule to set
fill: var(--theme-text)forsvg.graph > g.graph > textso graph-level labels adapt to light/dark themes.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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<text>element with nofillattribute and defaults to black. That isfine on the light page background but invisible in dark mode.
Add a CSS rule that colors the graph-level label with
--theme-textsoit adapts to the active theme. The
svg.graph > g.graph > textselectortargets only the top-level caption — node labels (
g.node > text) andcluster labels (
g.cluster > text, which carry their own colors onfilled 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 noreply@anthropic.com