From 5d13b53eb545dc20d4c6bc9fa3393647c434dc8e Mon Sep 17 00:00:00 2001 From: Saman Shirdel Date: Wed, 5 Aug 2026 21:34:49 +0330 Subject: [PATCH] Pin network overlay text to a fixed light palette so every theme stays legible (#6529) * fix(network): pin overlay text to a fixed on-scrim palette 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. * Trim the on-scrim palette comments to the constraint Co-Authored-By: Claude Fable 5 * Pin overlay error text to a fixed on-scrim urgent color Co-Authored-By: Claude Fable 5 --------- Co-authored-by: David Heinemeier Hansson Co-authored-by: Claude Fable 5 --- .../plugins/panels/network/SpeedTestPanel.qml | 24 ++++++++++++------- shell/plugins/panels/network/WifiQrPanel.qml | 16 +++++++++---- 2 files changed, 26 insertions(+), 14 deletions(-) diff --git a/shell/plugins/panels/network/SpeedTestPanel.qml b/shell/plugins/panels/network/SpeedTestPanel.qml index 2e690209..76307ead 100644 --- a/shell/plugins/panels/network/SpeedTestPanel.qml +++ b/shell/plugins/panels/network/SpeedTestPanel.qml @@ -33,6 +33,12 @@ PanelWindow { readonly property bool failed: error !== "" readonly property bool finished: !running && !failed && (downloadValue > 0 || uploadValue > 0) + // The scrim below is a fixed near-black regardless of theme, so text and + // ticks on it need 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" + function toMbps(raw) { var value = parseFloat(raw) return isFinite(value) && value > 0 ? value : 0 @@ -101,7 +107,7 @@ PanelWindow { Text { visible: root.connectionName !== "" text: root.connectionName.toUpperCase() - color: Qt.darker(root.bar.foreground, 1.4) + color: root.onScrimDim font.family: root.bar.fontFamily font.pixelSize: Style.font.caption font.bold: true @@ -137,7 +143,7 @@ PanelWindow { bordered: true enabled: !root.running opacity: root.running ? 0 : 1 - foreground: root.bar.foreground + foreground: root.onScrim fontFamily: root.bar.fontFamily fontSize: Style.font.bodySmall horizontalPadding: Style.space(14) @@ -153,7 +159,7 @@ PanelWindow { Text { visible: root.failed text: root.error - color: root.bar.urgent + color: root.onScrimUrgent font.family: root.bar.fontFamily font.pixelSize: Style.font.bodySmall wrapMode: Text.Wrap @@ -184,9 +190,9 @@ PanelWindow { readonly property int tickCount: 46 readonly property real arcWidth: Style.space(4) readonly property real arcRadius: diameter / 2 - arcWidth - readonly property color trackColor: Qt.rgba(root.bar.foreground.r, root.bar.foreground.g, root.bar.foreground.b, 0.14) - readonly property color minorTickColor: Qt.rgba(root.bar.foreground.r, root.bar.foreground.g, root.bar.foreground.b, 0.12) - readonly property color majorTickColor: Qt.rgba(root.bar.foreground.r, root.bar.foreground.g, root.bar.foreground.b, 0.3) + readonly property color trackColor: Qt.rgba(1, 1, 1, 0.14) + readonly property color minorTickColor: Qt.rgba(1, 1, 1, 0.12) + readonly property color majorTickColor: Qt.rgba(1, 1, 1, 0.3) // The dial that isn't measuring yet sits dimmed until it gets a figure. readonly property bool engaged: live || value > 0 @@ -361,7 +367,7 @@ PanelWindow { Text { anchors.horizontalCenter: parent.horizontalCenter text: dial.reading < 10 ? dial.reading.toFixed(1) : Math.round(dial.reading).toString() - color: root.bar.foreground + color: root.onScrim font.family: root.bar.fontFamily font.pixelSize: Style.font.display font.bold: true @@ -370,7 +376,7 @@ PanelWindow { Text { anchors.horizontalCenter: parent.horizontalCenter text: "Mbps" - color: Qt.darker(root.bar.foreground, 1.4) + color: root.onScrimDim font.family: root.bar.fontFamily font.pixelSize: Style.font.caption } @@ -382,7 +388,7 @@ PanelWindow { anchors.horizontalCenter: parent.horizontalCenter anchors.bottom: parent.bottom text: dial.label - color: Qt.darker(root.bar.foreground, 1.3) + color: root.onScrimDim font.family: root.bar.fontFamily font.pixelSize: Style.font.caption font.bold: true diff --git a/shell/plugins/panels/network/WifiQrPanel.qml b/shell/plugins/panels/network/WifiQrPanel.qml index 1d4a3193..6493da8a 100644 --- a/shell/plugins/panels/network/WifiQrPanel.qml +++ b/shell/plugins/panels/network/WifiQrPanel.qml @@ -25,6 +25,12 @@ PanelWindow { readonly property bool showingQr: qrSize > 0 && !loading && error === "" + // 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" + signal closeRequested() signal passwordToggleRequested() @@ -84,7 +90,7 @@ PanelWindow { Text { text: (root.ssid || "Wi-Fi").toUpperCase() - color: Qt.darker(root.bar.foreground, 1.4) + color: root.onScrimDim font.family: root.bar.fontFamily font.pixelSize: Style.font.caption font.bold: true @@ -136,7 +142,7 @@ PanelWindow { Text { visible: root.loading text: "Generating QR code…" - color: Qt.darker(root.bar.foreground, 1.3) + color: root.onScrimDim font.family: root.bar.fontFamily font.pixelSize: Style.font.bodySmall Layout.fillWidth: true @@ -146,7 +152,7 @@ PanelWindow { Text { visible: root.error !== "" text: root.error - color: root.bar.urgent + color: root.onScrimUrgent font.family: root.bar.fontFamily font.pixelSize: Style.font.bodySmall wrapMode: Text.Wrap @@ -158,7 +164,7 @@ PanelWindow { Text { visible: root.showingQr text: "Scan to join this network" - color: Qt.darker(root.bar.foreground, 1.3) + color: root.onScrimDim font.family: root.bar.fontFamily font.pixelSize: Style.font.bodySmall Layout.fillWidth: true @@ -170,7 +176,7 @@ PanelWindow { text: root.passwordError !== "" ? root.passwordError : root.passwordVisible ? root.password : "Show password" - color: root.passwordError !== "" ? root.bar.urgent : root.bar.foreground + color: root.passwordError !== "" ? root.onScrimUrgent : root.onScrim opacity: root.passwordVisible || root.passwordError !== "" ? 1 : 0.6 font.family: root.bar.fontFamily font.pixelSize: Style.font.bodySmall