dotfiles/.config/quickshell/modules/bar/VpnIndicator.qml

@@ -313,6 +313,13 @@ Item {
 
     // --- Bar icon ------------------------------------------------------------
 
+    // A fixed, wallpaper-independent green rather than Colors.primary — the
+    // glyph itself doesn't change shape between states (unlike Tailscale's
+    // crossed-out logo), so "connected" needs to read as a shape cue (a
+    // badge appearing) rather than rely on a color swap that can end up
+    // low-contrast depending on the current pywal palette.
+    readonly property color connectedBadgeColor: "#3ddc84"
+
     Text {
         id: label
         anchors.centerIn: parent
@@ -323,6 +330,23 @@ Item {
         text: "vpn_lock"
     }
 
+    // Small solid dot badge, bottom-right of the glyph, shown only while a
+    // tunnel is actually up — a shape appearing/disappearing reads at a
+    // glance even when the icon tint alone wouldn't stand out.
+    Rectangle {
+        visible: root.anyConnected
+        width: 6
+        height: 6
+        radius: 3
+        color: root.connectedBadgeColor
+        border.color: Colors.background
+        border.width: 1
+        anchors.right: label.right
+        anchors.bottom: label.bottom
+        anchors.rightMargin: 0
+        anchors.bottomMargin: 1
+    }
+
     MouseArea {
         anchors.fill: parent
         cursorShape: Qt.PointingHandCursor
@@ -524,7 +548,7 @@ Item {
 
                     ProviderRow {
                         label: "Mullvad"
-                        subIcon: "shield"
+                        subIcon: "gpp_good"
                         state: root.mullvadState
                         detailText: root.mullvadDetail
                         installed: root.mullvadInstalled