Brand the panel: yellow IP/DNS line, white toggle

- Colour the IP / DNS subtitle under each machine with the logo yellow
  (#FAE204, sampled as the dominant opaque colour of offscale-logo.png).
  Stock draws that line through `dim` = Qt.darker(foreground, 1.55), which
  on yellow shifts the hue to olive (#A19203) rather than quietening it, so
  it takes the flat accent instead. Everything else keeps the themed
  foreground: section headers, machine names, account names and all the
  iconography.

- Add OffscaleToggle.qml so the switch reads white when on. The stock
  ToggleSwitch resolves its checked colours through
  Style.selectedStateColor / selectedFillFor, which read [controls]
  selected-color; Ethereal sets that to a literal "#ffcead" and
  Style.resolveStateColor returns literals verbatim, ignoring the
  foreground and accent properties entirely. No property on the stock
  switch can reach it, and overriding the token globally would recolour
  every selected state in the shell. The copy differs only in the checked
  state and needs an explicit `import qs.Ui`, which the original gets
  implicitly by living inside that module.

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

Panel.qml

@@ -23,9 +23,18 @@ Panel {
   property bool mullvadPickerOpen: false
   property string mullvadQuery: ""
 
+  // Text stays on the bar's themed colour: section headers, machine names and
+  // account names read white.
   readonly property color foreground: bar ? bar.foreground : Color.foreground
   readonly property color urgent: bar ? bar.urgent : Color.urgent
   readonly property color dim: Qt.darker(foreground, 1.55)
+
+  // Brand yellow, sampled as the dominant opaque colour of offscale-logo.png.
+  // Used for exactly one thing: the IP / DNS subtitle under each machine, at
+  // full strength. Stock renders that line through `dim`, but darkening yellow
+  // shifts its hue to olive (#A19203) rather than merely quietening it, so it
+  // gets the flat accent instead. Icons stay on the themed foreground.
+  readonly property color accent: "#FAE204"
   readonly property string fontFamily: bar ? bar.fontFamily : Style.font.family
   readonly property bool showConnections: tailscale.accounts.length > 1 || tailscale.accountsAccessDenied
   readonly property bool showPeers: tailscale.active && tailscale.peers.length > 0
@@ -499,13 +508,19 @@ Panel {
               // header's only cursor target. The service already flips `active`
               // optimistically, so the knob throws the instant you click it.
               trailingControl: Component {
-                ToggleSwitch {
+                OffscaleToggle {
                   id: powerSwitch
                   visible: tailscale.installed
                   checked: tailscale.active
                   busy: tailscale.busy
                   hasCursor: header.ringVisible
                   foreground: hero.foreground
+                  // ToggleSwitch defaults `accent` to Color.accent — the theme
+                  // accent, which is where the off-white/peach knob and border
+                  // came from. The hero only forwards `foreground`, so pin
+                  // accent to it as well and the switch reads white in both the
+                  // connected and disconnected states.
+                  accent: hero.foreground
                   onHovered: function(on) { if (on) header.focusHero() }
                   onToggled: tailscale.toggleOffscale()
 
@@ -998,7 +1013,7 @@ Panel {
             if (peerRow.peerDns !== "") parts.push(peerRow.peerDns)
             return parts.join(" · ")
           }
-          color: root.dim
+          color: root.accent
           font.family: root.fontFamily
           font.pixelSize: Style.font.caption
           elide: Text.ElideRight