ZacharyZhang-NY/omarchycn
2
2
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Projects Releases 3 Wiki Activity

Pin network overlay text to a fixed light palette so every theme stays legible (#6529)

Browse Source 
* 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 <noreply@anthropic.com>

* Pin overlay error text to a fixed on-scrim urgent color

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

---------

Co-authored-by: David Heinemeier Hansson <david@hey.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Saman Shirdel
2026-08-05 13:04:49 -05:00
committed by GitHub
co-authored by Claude Fable 5 David Heinemeier Hansson
parent 75538f5927
commit 5d13b53eb5
2 changed files with 26 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shell/plugins/panels/network/SpeedTestPanel.qml
+15 -9
View File
@@ -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
shell/plugins/panels/network/WifiQrPanel.qml
+11 -5
View File
@@ -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