fix(network-panel): speed test contrast - #6529
Merged
Merged
Conversation
SpeedTestPanel and WifiQrPanel both draw over a hardcoded near-black scrim, but their text/tick colors came from bar.foreground -- a color themed to contrast with the *bar's* own background, which flips dark/light per theme. On themes with a dark bar.foreground, digits and labels went invisible against the black scrim, leaving only the accent-colored arc/needle (Color.accent) visible. Add a fixed white-based on-scrim palette (onScrim/onScrimDim) to both overlays and route all text/tick colors through it, independent of theme. bar.urgent stays theme-driven since it's a semantic color already legible on near-black.
Contributor
There was a problem hiding this comment.
Pull request overview
Pins network overlay text and dial colors to a light palette for reliable contrast against the fixed dark scrim.
Changes:
- Adds fixed primary and dimmed on-scrim colors.
- Applies them to QR text, speed-test controls, labels, readings, and ticks.
Tip
If you aren't ready for review, convert to a draft PR.
Click "Convert to draft" or run gh pr ready --undo.
Click "Ready for review" or run gh pr ready to reengage.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
WifiQrPanel.qml |
Uses fixed colors for QR overlay text. |
SpeedTestPanel.qml |
Uses fixed colors for dial and overlay content. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| : root.passwordVisible ? root.password | ||
| : "Show password" | ||
| color: root.passwordError !== "" ? root.bar.urgent : root.bar.foreground | ||
| color: root.passwordError !== "" ? root.bar.urgent : root.onScrim |
| // so everything drawn on it needs a fixed light-on-dark palette too. | ||
| // `bar.foreground` is themed to contrast against the *bar's* own | ||
| // background, which flips dark/light independently of this scrim -- on | ||
| // light-foreground themes that made every label, tick, and digit here |
| // Same fix as SpeedTestPanel: the scrim below is fixed near-black | ||
| // regardless of theme, so text on it needs a fixed light palette instead | ||
| // of `bar.foreground` (which flips dark/light with the bar's own theme | ||
| // and was going near-invisible on light-foreground themes). |
heyssh
changed the title
heyssh
changed the title
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.
Suppressed comments (1)
shell/plugins/panels/network/WifiQrPanel.qml:31
- This also changes the Wi-Fi QR overlay’s visual palette, but the PR’s verification only demonstrates the speed-test overlay. Shell visual changes require inspection in the running UI; please open the QR overlay on the affected theme and capture/inspect its updated states (including loading, success/password, and error) before merging.
// The scrim below is a fixed near-black regardless of theme, so text on
// it needs a fixed light palette, not the themed bar.foreground.
readonly property color onScrim: "white"
readonly property color onScrimDim: Qt.rgba(1, 1, 1, 0.55)
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.
Suppressed comments (2)
shell/plugins/panels/network/WifiQrPanel.qml:32
- The PR is scoped and tested as a speed-test contrast fix, but this new palette also changes every Wi-Fi QR overlay label, status, password, and error color. This is an unverified behavior change outside the stated scope; please either revert the QR-panel edits or document and visually verify this overlay as part of the PR.
// The scrim below is a fixed near-black regardless of theme, so text on
// it needs a fixed light palette, not the themed bar.foreground.
readonly property color onScrim: "white"
readonly property color onScrimDim: Qt.rgba(1, 1, 1, 0.55)
readonly property color onScrimUrgent: "#ff6b6b"
shell/plugins/panels/network/SpeedTestPanel.qml:40
- The description says the error-state color is deliberately left unchanged, but this property replaces the existing themed
bar.urgentcolor with a hard-coded value. If that stated exception is intentional, keep this palette entry bound tobar.urgent; otherwise the description and visual verification need to cover the newly fixed error color.
readonly property color onScrimUrgent: "#ff6b6b"
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.
Network Panel — Speed Test Contrast Fix
The Problem
Opening the speed test from the Network panel, the floating dial cluster showed almost nothing on some themes: no digits, no "DOWNLOAD"/"UPLOAD" labels, no tick marks around the dials — only the glowing blue arc and needle were visible. Switching to Tokyo Night, the exact same overlay looked correct, with every label and digit clearly legible.
Root Cause
The speed test overlay is designed with no card and no border — just the two dials floating on a deep, near-black scrim laid over the whole screen. That scrim is fixed and doesn't change with the theme, on purpose: it's meant to guarantee readable contrast no matter what wallpaper is behind it.
The text and tick colors inside the overlay, though, weren't fixed — they followed the bar's own theme color, the same color used to keep text legible against the bar itself. That color is designed to flip between light and dark depending on the theme, since the bar's background does too. On themes where that color comes out dark, it was being drawn on top of the equally dark scrim, and the two nearly disappeared into each other. Only the accent-colored arc and needle stayed visible, since those were never tied to that color in the first place.
The Fix
The speed test overlay now uses its own fixed, theme-independent color for everything drawn on the scrim — a light color for the main text and a softer, dimmed version of it for secondary labels and tick marks. Since the scrim itself never changes, this pairing is guaranteed to stay legible on every theme, including the one that was previously broken. The one exception left alone is the error-state color, which is a deliberate warning color already designed to read clearly against a dark background regardless of theme.
Test
before:
After:
Result
The speed test dials now display all their text, numbers, and tick marks clearly on every theme — not just Tokyo Night.