feat: fix menu bar colors not showing on macOS 26 (Liquid Glass) (#16)

johnlarkin1 · claude · web-flow · commit 61e8dadf913f · 2026-03-19T07:31:04.000-04:00
* feat: fix menu bar colors not showing on macOS 26 (Liquid Glass)

macOS 26 Liquid Glass overrides contentTintColor on template images in
the menu bar, breaking CodexBar's color-coded usage icons. On macOS 26+,
bake the tint color directly into image pixels using sourceIn compositing
and set isTemplate=false. On older macOS, keep the existing template +
contentTintColor approach unchanged.

Also modernizes deprecated APIs:
- Replace lockFocus/unlockFocus with NSImage(size:flipped:drawingHandler:)
- Replace deviceRGB with calibratedRGB for consistent rendering
- Replace NSColor(deviceRed:) with NSColor(red:green:blue:alpha:)
- Add appearance change observer to re-render on dark/light mode switch

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;

* Bump version to 0.18.0-beta.3-jl.3

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;

---------

Co-authored-by: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
@@ -9,7 +9,11 @@
       "mcp__plugin_github_github__search_code",
       "mcp__plugin_github_github__search_pull_requests",
       "Bash(git log:*)",
-      "Bash(./Scripts/lint.sh lint:*)"
+      "Bash(./Scripts/lint.sh lint:*)",
+      "Bash(grep -r macOS /Users/johnlarkin/Documents/coding/macos-cc-usage-project/CodexBar/*.toml /Users/johnlarkin/Documents/coding/macos-cc-usage-project/CodexBar/Package.swift)",
+      "Bash(grep:*)",
+      "Bash(xargs cat:*)",
+      "Skill(generate-pr)"
     ]
   }
 }
diff --git a/Sources/CodexBar/IconRenderer.swift b/Sources/CodexBar/IconRenderer.swift
@@ -35,6 +35,7 @@ enum IconRenderer {
         let stale: Bool
         let style: Int
         let indicator: Int
+        let tintHash: Int
     }
 
     private final class IconCacheStore: @unchecked Sendable {
@@ -118,11 +119,12 @@ enum IconRenderer {
         blink: CGFloat = 0,
         wiggle: CGFloat = 0,
         tilt: CGFloat = 0,
-        statusIndicator: ProviderStatusIndicator = .none) -> NSImage
+        statusIndicator: ProviderStatusIndicator = .none,
+        tintColor: NSColor? = nil) -> NSImage
     {
         let shouldCache = blink <= 0.0001 && wiggle <= 0.0001 && tilt <= 0.0001
         let render = {
-            self.renderImage {
+            self.renderImage(tintColor: tintColor) {
                 // Keep monochrome template icons; Claude uses subtle shape cues only.
                 let baseFill = NSColor.labelColor
                 let trackFillAlpha: CGFloat = stale ? 0.18 : 0.28
@@ -749,7 +751,8 @@ enum IconRenderer {
                 credits: self.quantizedCredits(creditsRemaining),
                 stale: stale,
                 style: self.styleKey(style),
-                indicator: self.indicatorKey(statusIndicator))
+                indicator: self.indicatorKey(statusIndicator),
+                tintHash: self.tintColorHash(tintColor))
             if let cached = self.cachedIcon(for: key) {
                 return cached
             }
@@ -811,6 +814,21 @@ enum IconRenderer {
         }
     }
 
+    private static func tintColorHash(_ color: NSColor?) -> Int {
+        guard let color else { return 0 }
+        // Quantize to 256 buckets per channel to avoid cache explosion while preserving visual fidelity.
+        var r: CGFloat = 0
+        var g: CGFloat = 0
+        var b: CGFloat = 0
+        var a: CGFloat = 0
+        (color.usingColorSpace(.sRGB) ?? color).getRed(&r, green: &g, blue: &b, alpha: &a)
+        let ri = Int((r * 255).rounded())
+        let gi = Int((g * 255).rounded())
+        let bi = Int((b * 255).rounded())
+        let ai = Int((a * 255).rounded())
+        return ri << 24 | gi << 16 | bi << 8 | ai
+    }
+
     private static func morphCacheKey(progress: Double, style: IconStyle) -> NSNumber {
         let bucket = Int((progress * Double(self.morphBucketCount)).rounded())
         let key = self.styleKey(style) * 1000 + bucket
@@ -988,7 +1006,7 @@ enum IconRenderer {
         CGRect(x: self.snap(x), y: self.snap(y), width: self.snap(width), height: self.snap(height))
     }
 
-    private static func renderImage(_ draw: () -> Void) -> NSImage {
+    private static func renderImage(tintColor: NSColor? = nil, _ draw: () -> Void) -> NSImage {
         let image = NSImage(size: Self.outputSize)
 
         if let rep = NSBitmapImageRep(
@@ -999,7 +1017,7 @@ enum IconRenderer {
             samplesPerPixel: 4,
             hasAlpha: true,
             isPlanar: false,
-            colorSpaceName: .deviceRGB,
+            colorSpaceName: .calibratedRGB,
             bytesPerRow: 0,
             bitsPerPixel: 0)
         {
@@ -1010,16 +1028,29 @@ enum IconRenderer {
             if let ctx = NSGraphicsContext(bitmapImageRep: rep) {
                 NSGraphicsContext.current = ctx
                 Self.withScaledContext(draw)
+
+                // On macOS 26+, bake the tint color into the image pixels using sourceIn compositing
+                // so the color survives Liquid Glass's template-image pipeline.
+                if let tintColor {
+                    let cgCtx = ctx.cgContext
+                    let scaledSize = CGSize(
+                        width: Self.outputSize.width * Self.outputScale,
+                        height: Self.outputSize.height * Self.outputScale)
+                    cgCtx.saveGState()
+                    cgCtx.setBlendMode(.sourceIn)
+                    tintColor.setFill()
+                    cgCtx.fill(CGRect(origin: .zero, size: scaledSize))
+                    cgCtx.restoreGState()
+                }
             }
             NSGraphicsContext.restoreGraphicsState()
-        } else {
-            // Fallback to legacy focus if the bitmap rep fails for any reason.
-            image.lockFocus()
-            Self.withScaledContext(draw)
-            image.unlockFocus()
         }
 
-        image.isTemplate = true
+        if tintColor != nil {
+            image.isTemplate = false
+        } else {
+            image.isTemplate = true
+        }
         return image
     }
 }
diff --git a/Sources/CodexBar/StatusItemController+Animation.swift b/Sources/CodexBar/StatusItemController+Animation.swift
@@ -294,9 +294,15 @@ extension StatusItemController {
            let brand = ProviderBrandIcon.image(for: primaryProvider)
         {
             let displayText = self.menuBarDisplayText(for: primaryProvider, snapshot: snapshot)
-            self.setButtonImage(brand, for: button)
+            if #available(macOS 26, *) {
+                let tinted = Self.tintedBrandImage(brand, color: usageColor)
+                self.setButtonImage(tinted, for: button)
+                self.setButtonTintColor(nil, for: button)
+            } else {
+                self.setButtonImage(brand, for: button)
+                self.setButtonTintColor(usageColor, for: button)
+            }
             self.setButtonTitle(displayText, for: button)
-            self.setButtonTintColor(usageColor, for: button)
             return
         }
 
@@ -326,18 +332,34 @@ extension StatusItemController {
             self.setButtonImage(image, for: button)
             self.setButtonTintColor(nil, for: button)
         } else {
-            let image = IconRenderer.makeIcon(
-                primaryRemaining: primary,
-                weeklyRemaining: weekly,
-                creditsRemaining: credits,
-                stale: stale,
-                style: style,
-                blink: blink,
-                wiggle: wiggle,
-                tilt: tilt,
-                statusIndicator: statusIndicator)
-            self.setButtonImage(image, for: button)
-            self.setButtonTintColor(usageColor, for: button)
+            if #available(macOS 26, *) {
+                let image = IconRenderer.makeIcon(
+                    primaryRemaining: primary,
+                    weeklyRemaining: weekly,
+                    creditsRemaining: credits,
+                    stale: stale,
+                    style: style,
+                    blink: blink,
+                    wiggle: wiggle,
+                    tilt: tilt,
+                    statusIndicator: statusIndicator,
+                    tintColor: usageColor)
+                self.setButtonImage(image, for: button)
+                self.setButtonTintColor(nil, for: button)
+            } else {
+                let image = IconRenderer.makeIcon(
+                    primaryRemaining: primary,
+                    weeklyRemaining: weekly,
+                    creditsRemaining: credits,
+                    stale: stale,
+                    style: style,
+                    blink: blink,
+                    wiggle: wiggle,
+                    tilt: tilt,
+                    statusIndicator: statusIndicator)
+                self.setButtonImage(image, for: button)
+                self.setButtonTintColor(usageColor, for: button)
+            }
         }
     }
 
@@ -359,9 +381,15 @@ extension StatusItemController {
            let brand = ProviderBrandIcon.image(for: provider)
         {
             let displayText = self.menuBarDisplayText(for: provider, snapshot: snapshot)
-            self.setButtonImage(brand, for: button)
+            if #available(macOS 26, *) {
+                let tinted = Self.tintedBrandImage(brand, color: usageColor)
+                self.setButtonImage(tinted, for: button)
+                self.setButtonTintColor(nil, for: button)
+            } else {
+                self.setButtonImage(brand, for: button)
+                self.setButtonTintColor(usageColor, for: button)
+            }
             self.setButtonTitle(displayText, for: button)
-            self.setButtonTintColor(usageColor, for: button)
             return
         }
 
@@ -448,18 +476,34 @@ extension StatusItemController {
             self.setButtonTintColor(nil, for: button)
         } else {
             self.setButtonTitle(nil, for: button)
-            let image = IconRenderer.makeIcon(
-                primaryRemaining: primary,
-                weeklyRemaining: weekly,
-                creditsRemaining: credits,
-                stale: stale,
-                style: style,
-                blink: blink,
-                wiggle: wiggle,
-                tilt: tilt,
-                statusIndicator: self.store.statusIndicator(for: provider))
-            self.setButtonImage(image, for: button)
-            self.setButtonTintColor(usageColor, for: button)
+            if #available(macOS 26, *) {
+                let image = IconRenderer.makeIcon(
+                    primaryRemaining: primary,
+                    weeklyRemaining: weekly,
+                    creditsRemaining: credits,
+                    stale: stale,
+                    style: style,
+                    blink: blink,
+                    wiggle: wiggle,
+                    tilt: tilt,
+                    statusIndicator: self.store.statusIndicator(for: provider),
+                    tintColor: usageColor)
+                self.setButtonImage(image, for: button)
+                self.setButtonTintColor(nil, for: button)
+            } else {
+                let image = IconRenderer.makeIcon(
+                    primaryRemaining: primary,
+                    weeklyRemaining: weekly,
+                    creditsRemaining: credits,
+                    stale: stale,
+                    style: style,
+                    blink: blink,
+                    wiggle: wiggle,
+                    tilt: tilt,
+                    statusIndicator: self.store.statusIndicator(for: provider))
+                self.setButtonImage(image, for: button)
+                self.setButtonTintColor(usageColor, for: button)
+            }
         }
     }
 
@@ -670,19 +714,37 @@ extension StatusItemController {
     {
         guard statusIndicator.hasIssue else { return brand }
 
-        let image = NSImage(size: brand.size)
-        image.lockFocus()
-        brand.draw(
-            at: .zero,
-            from: NSRect(origin: .zero, size: brand.size),
-            operation: .sourceOver,
-            fraction: 1.0)
-        Self.drawBrandStatusOverlay(indicator: statusIndicator, size: brand.size)
-        image.unlockFocus()
+        let image = NSImage(size: brand.size, flipped: false) { rect in
+            brand.draw(
+                at: .zero,
+                from: rect,
+                operation: .sourceOver,
+                fraction: 1.0)
+            Self.drawBrandStatusOverlay(indicator: statusIndicator, size: brand.size)
+            return true
+        }
         image.isTemplate = brand.isTemplate
         return image
     }
 
+    /// Composites a tint color onto a brand image using sourceIn blending, producing a non-template image
+    /// suitable for macOS 26 Liquid Glass where `contentTintColor` is ignored on template images.
+    nonisolated static func tintedBrandImage(_ brand: NSImage, color: NSColor?) -> NSImage {
+        guard let color else { return brand }
+        let image = NSImage(size: brand.size, flipped: false) { rect in
+            brand.draw(in: rect, from: rect, operation: .sourceOver, fraction: 1.0)
+            guard let ctx = NSGraphicsContext.current?.cgContext else { return true }
+            ctx.saveGState()
+            ctx.setBlendMode(.sourceIn)
+            color.setFill()
+            ctx.fill(rect)
+            ctx.restoreGState()
+            return true
+        }
+        image.isTemplate = false
+        return image
+    }
+
     private nonisolated static func drawBrandStatusOverlay(indicator: ProviderStatusIndicator, size: NSSize) {
         guard indicator.hasIssue else { return }
 
diff --git a/Sources/CodexBar/StatusItemController+SwitcherViews.swift b/Sources/CodexBar/StatusItemController+SwitcherViews.swift
@@ -714,15 +714,15 @@ final class ProviderSwitcherView: NSView {
 
     private static func paddedImage(_ image: NSImage, leading: CGFloat) -> NSImage {
         let size = NSSize(width: image.size.width + leading, height: image.size.height)
-        let newImage = NSImage(size: size)
-        newImage.lockFocus()
-        let y = (size.height - image.size.height) / 2
-        image.draw(
-            at: NSPoint(x: leading, y: y),
-            from: NSRect(origin: .zero, size: image.size),
-            operation: .sourceOver,
-            fraction: 1.0)
-        newImage.unlockFocus()
+        let newImage = NSImage(size: size, flipped: false) { _ in
+            let y = (size.height - image.size.height) / 2
+            image.draw(
+                at: NSPoint(x: leading, y: y),
+                from: NSRect(origin: .zero, size: image.size),
+                operation: .sourceOver,
+                fraction: 1.0)
+            return true
+        }
         newImage.isTemplate = image.isTemplate
         return newImage
     }
@@ -774,7 +774,11 @@ final class ProviderSwitcherView: NSView {
         switch selection {
         case let .provider(provider):
             let color = ProviderDescriptorRegistry.descriptor(for: provider).branding.color
-            return NSColor(deviceRed: color.red, green: color.green, blue: color.blue, alpha: 1)
+            return NSColor(
+                red: CGFloat(color.red),
+                green: CGFloat(color.green),
+                blue: CGFloat(color.blue),
+                alpha: 1.0)
         case .overview:
             return NSColor.secondaryLabelColor
         }
diff --git a/Sources/CodexBar/StatusItemController.swift b/Sources/CodexBar/StatusItemController.swift
@@ -92,6 +92,7 @@ final class StatusItemController: NSObject, NSMenuDelegate, StatusItemControllin
     var lastSwitcherProviders: [UsageProvider] = []
     /// Tracks which switcher tab state was used for the current merged-menu switcher instance.
     var lastMergedSwitcherSelection: ProviderSwitcherSelection?
+    private var appearanceObservation: NSKeyValueObservation?
     let loginLogger = CodexBarLog.logger(LogCategories.login)
     var selectedMenuProvider: UsageProvider? {
         get { self.settings.selectedMenuProvider }
@@ -195,6 +196,14 @@ final class StatusItemController: NSObject, NSMenuDelegate, StatusItemControllin
             selector: #selector(self.handleProviderConfigDidChange),
             name: .codexbarProviderConfigDidChange,
             object: nil)
+
+        // On macOS 26+, usage colors are baked into non-template images. Re-render when the system
+        // appearance changes so dynamic colors (systemGreen/Orange/Red) resolve to their new values.
+        if #available(macOS 26, *) {
+            self.appearanceObservation = NSApp.observe(\.effectiveAppearance) { [weak self] _, _ in
+                Task { @MainActor in self?.updateIcons() }
+            }
+        }
     }
 
     private func wireBindings() {
diff --git a/Tests/CodexBarTests/StatusItemAnimationTests.swift b/Tests/CodexBarTests/StatusItemAnimationTests.swift
@@ -658,11 +658,11 @@ struct StatusItemAnimationTests {
     @Test
     func brandImageWithStatusOverlayDrawsIssueMark() throws {
         let size = NSSize(width: 16, height: 16)
-        let brand = NSImage(size: size)
-        brand.lockFocus()
-        NSColor.clear.setFill()
-        NSBezierPath(rect: NSRect(origin: .zero, size: size)).fill()
-        brand.unlockFocus()
+        let brand = NSImage(size: size, flipped: false) { rect in
+            NSColor.clear.setFill()
+            NSBezierPath(rect: rect).fill()
+            return true
+        }
         brand.isTemplate = true
 
         let baselineData = try #require(brand.tiffRepresentation)
diff --git a/version.env b/version.env
@@ -1,2 +1,2 @@
-MARKETING_VERSION=0.18.0-beta.3-jl.2
-BUILD_NUMBER=52
+MARKETING_VERSION=0.18.0-beta.3-jl.3
+BUILD_NUMBER=53

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,11 @@`
`9`	`9`	`"mcp__plugin_github_github__search_code",`
`10`	`10`	`"mcp__plugin_github_github__search_pull_requests",`
`11`	`11`	`"Bash(git log:*)",`
`12`		`- "Bash(./Scripts/lint.sh lint:*)"`
	`12`	`+ "Bash(./Scripts/lint.sh lint:*)",`
	`13`	`+ "Bash(grep -r macOS /Users/johnlarkin/Documents/coding/macos-cc-usage-project/CodexBar/*.toml /Users/johnlarkin/Documents/coding/macos-cc-usage-project/CodexBar/Package.swift)",`
	`14`	`+ "Bash(grep:*)",`
	`15`	`+ "Bash(xargs cat:*)",`
	`16`	`+ "Skill(generate-pr)"`
`13`	`17`	`]`
`14`	`18`	`}`
`15`	`19`	`}`