Blitz blendet zwischen zwei fertigen Fassungen über

Deine Idee war die bessere. Eine helle Fläche mit dunklem Rand ließ sich aus
einem einzelnen Symbol nur nachbauen, indem dasselbe Zeichen zweimal in
verschiedener Größe übereinander gezeichnet wurde — und die
Größenverhältnisse sahen nie stimmig aus, wie man an den drei Anläufen
sieht. Zwei fertige Fassungen ineinander zu blenden ist der geradere Weg:
gezeichnet wird genau das, was in der Datei steht.

Erst die dunkle voll deckend, dann die helle mit steigender Deckkraft
darüber. Zeichnete man beide anteilig, schiene dazwischen der Hintergrund
durch und der Blitz wirkte blass.

Ohne eigenen Rand bekommt der Blitz den vollen Innenraum des Akkus statt
Innenraum minus Rand — er ist damit wieder etwas größer, bleibt aber
innerhalb des Rahmens. Der Test hält die neue Grenze fest.

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

Packages/OnyxKit/Sources/MetricsProvider/BatteryGlyph.swift

@@ -68,16 +68,22 @@ public enum BatteryGlyph {
         return (filled, empty)
     }
 
-    /// Der Blitz als eigene Vorlage.
+    /// Der Blitz in zwei Fassungen, hell und dunkel.
     ///
-    /// SF Symbols' `bolt.fill` ist eine massive Fläche; die mitgelieferte
-    /// Kontur trifft die Form besser und bringt schon einen kräftigen Strich
-    /// mit. Fehlt die Datei, bleibt das Systemsymbol.
-    public static let chargingGlyph: NSImage? = {
-        guard let url = Bundle.main.url(forResource: "thunder", withExtension: "svg")
+    /// **Warum zwei Dateien statt einer eingefärbten:** eine helle Fläche mit
+    /// dunklem Rand ließ sich aus einem einzelnen Symbol nur nachbauen, indem
+    /// dasselbe Zeichen zweimal in verschiedener Größe übereinander gezeichnet
+    /// wurde — und die Größenverhältnisse sahen nie stimmig aus. Zwei fertige
+    /// Fassungen ineinander zu blenden ist der geradere Weg: gezeichnet wird
+    /// genau das, was in der Datei steht.
+    public static let boltLight: NSImage? = load("bolt-light")
+    public static let boltDark: NSImage? = load("bolt-dark")
+
+    private static func load(_ name: String) -> NSImage? {
+        guard let url = Bundle.main.url(forResource: name, withExtension: "svg")
         else { return nil }
         return NSImage(contentsOf: url)
-    }()
+    }
 
     /// Wie dick der Rand um das Zeichen ist.
     public static let outlineWidth: CGFloat = 1
@@ -95,12 +101,11 @@ public enum BatteryGlyph {
     /// der Außenhöhe ausgeht, landet bei einem Blitz, der den ganzen Akku
     /// ausfüllt und an den Rahmen stößt.
     public static func glyphHeight(for indicator: Indicator, in height: CGFloat) -> CGFloat {
-        let inner = height - 2 * fillInset
-        let usable = max(inner - 2 * outlineWidth, 1)
+        let inner = max(height - 2 * fillInset, 1)
         switch indicator {
         // Das Pausenzeichen ist von Haus aus höher gebaut als der Blitz.
-        case .paused: return usable * 0.8
-        default: return usable
+        case .paused: return inner * 0.8
+        default: return inner
         }
     }
 
@@ -206,25 +211,20 @@ public enum BatteryGlyph {
             return
         }
 
-        // Der Blitz: mit dunklem Rand, und fadend.
+        // Der Blitz blendet zwischen den beiden Fassungen über.
         //
-        // Der Rand ist immer die Gegenfarbe zum Blitz selbst. Damit bleibt er
-        // in **jedem** Moment des Fadens lesbar: über der hellen Füllung trägt
-        // ihn der Rand, über dem leeren Teil der Blitz.
+        // Erst die dunkle voll deckend, dann die helle mit steigender
+        // Deckkraft darüber. So ist das Zeichen in jedem Moment vollständig
+        // gedeckt — zeichnete man beide anteilig, schiene dazwischen der
+        // Hintergrund durch und der Blitz wirkte blass.
         let whiteness = boltWhiteness(phase: fadePhase)
-        let inverseColor = NSColor(white: 1 - whiteness, alpha: 1)
-        let boltColor = NSColor(white: whiteness, alpha: 1)
-
-        if let custom = chargingGlyph {
-            MenuBarText.drawTemplate(custom, color: inverseColor, in: outlineRect(glyphRect))
-            MenuBarText.drawTemplate(custom, color: boltColor, in: glyphRect)
+        if let dark = boltDark, let light = boltLight {
+            dark.draw(in: glyphRect, from: .zero, operation: .sourceOver, fraction: 1)
+            light.draw(in: glyphRect, from: .zero, operation: .sourceOver,
+                       fraction: whiteness)
             return
         }
-        if let outline = tint(glyph, with: inverseColor) {
-            outline.draw(in: outlineRect(glyphRect), from: .zero,
-                         operation: .sourceOver, fraction: 1)
-        }
-        if let filled = tint(glyph, with: boltColor) {
+        if let filled = tint(glyph, with: NSColor(white: whiteness, alpha: 1)) {
             filled.draw(in: glyphRect, from: .zero, operation: .sourceOver, fraction: 1)
         }
     }
@@ -285,12 +285,7 @@ public struct BatteryGlyphView: View {
                             let phase = context.date.timeIntervalSinceReferenceDate
                                       / BatteryGlyph.fadeDuration
                             let whiteness = BatteryGlyph.boltWhiteness(phase: phase)
-                            ZStack {
-                                bolt(name: name, side: size + 2 * BatteryGlyph.outlineWidth)
-                                    .foregroundStyle(Color(white: 1 - whiteness))
-                                bolt(name: name, side: size)
-                                    .foregroundStyle(Color(white: whiteness))
-                            }
+                            bolt(side: size, whiteness: whiteness)
                         }
                     } else {
                         Image(systemName: name)
@@ -308,17 +303,20 @@ public struct BatteryGlyphView: View {
         .frame(width: width, height: height)
     }
 
-    /// Dieselbe Vorlage wie in der Menüleiste, sonst das Systemsymbol.
+    /// Dieselben zwei Fassungen wie in der Menüleiste, ineinander geblendet.
     @ViewBuilder
-    private func bolt(name: String, side: CGFloat) -> some View {
-        if let custom = BatteryGlyph.chargingGlyph {
-            Image(nsImage: custom)
-                .renderingMode(.template)
-                .resizable()
-                .aspectRatio(contentMode: .fit)
-                .frame(width: side, height: side)
+    private func bolt(side: CGFloat, whiteness: Double) -> some View {
+        if let dark = BatteryGlyph.boltDark, let light = BatteryGlyph.boltLight {
+            ZStack {
+                Image(nsImage: dark).resizable().aspectRatio(contentMode: .fit)
+                Image(nsImage: light).resizable().aspectRatio(contentMode: .fit)
+                    .opacity(whiteness)
+            }
+            .frame(width: side, height: side)
         } else {
-            Image(systemName: name).font(.system(size: side))
+            Image(systemName: "bolt.fill")
+                .font(.system(size: side))
+                .foregroundStyle(Color(white: whiteness))
         }
     }
 

Packages/OnyxKit/Tests/MetricsProviderTests/BatteryGlyphTests.swift

@@ -237,14 +237,15 @@ struct BatteryGlyphSizeTests {
 
     private let height = BatteryGlyph.size.height
 
-    @Test("Das Zeichen passt samt Rand in den Innenraum")
-    func glyphAndOutlineFitInside() {
+    @Test("Das Zeichen passt in den Innenraum")
+    func glyphFitsInside() {
         // Der Fehler, um den es ging: von der Außenhöhe ausgegangen, füllte der
-        // Blitz den ganzen Akku und stieß an den Rahmen.
+        // Blitz den ganzen Akku und stieß an den Rahmen. Bezugsgröße ist der
+        // Innenraum — der Rahmen nimmt oben und unten Platz, die Füllung sitzt
+        // eingerückt.
         let inner = height - 2 * BatteryGlyph.fillInset
         for indicator in BatteryGlyph.Indicator.allCases {
-            let glyph = BatteryGlyph.glyphHeight(for: indicator, in: height)
-            #expect(glyph + 2 * BatteryGlyph.outlineWidth <= inner + 0.001)
+            #expect(BatteryGlyph.glyphHeight(for: indicator, in: height) <= inner + 0.001)
         }
     }