SwiftUI MenuBarExtra图标适配暗黑模式失效问题求助

基础前提：确保图片资源配置正确 #

不管用哪种实现方式，先确认你的图片资源在Assets中的设置：

• 选中目标图片，在右侧属性面板的Appearance下拉选择「Any, Dark」
• 分别为「Any」（亮色模式）和「Dark」（暗色模式）导入对应的图片版本

如果已完成上述配置，但直接使用MenuBarExtra("", image: "my image name")仍只显示亮色图标，说明该初始化方法的环境未自动同步系统配色，需改用自定义Label方案并手动监听配色变化。

方案1：自定义Label+监听系统配色通知 #

SwiftUI的@Environment(\.colorScheme)在MenuBarExtra的Label层级中无法自动响应系统配色切换，可通过监听AppKit的外观变化通知手动更新视图：

MenuBarExtra {
    MenuView(model: menuModel)
} label: {
    MenuLogoView()
}

struct MenuLogoView: View {
    @State private var currentScheme: ColorScheme = .light
    
    var body: some View {
        Image(currentScheme == .light ? "light-icon" : "dark-icon")
            .onAppear {
                // 初始化当前配色
                currentScheme = NSApp.effectiveAppearance.isDarkMode ? .dark : .light
                // 添加系统外观变化监听
                NotificationCenter.default.addObserver(
                    forName: NSAppearance.didChangeNotification,
                    object: nil,
                    queue: .main
                ) { _ in
                    currentScheme = NSApp.effectiveAppearance.isDarkMode ? .dark : .light
                }
            }
            .onDisappear {
                // 移除监听避免内存泄漏
                NotificationCenter.default.removeObserver(
                    self,
                    name: NSAppearance.didChangeNotification,
                    object: nil
                )
            }
    }
}

// 给NSAppearance扩展暗色模式判断方法
extension NSAppearance {
    var isDarkMode: Bool {
        bestMatch(from: [.darkAqua, .aqua]) == .darkAqua
    }
}

方案2：用AppKit视图包裹实现自动适配 #

如果SwiftUI层级的适配仍有问题，可直接用NSViewRepresentable包裹NSImageView，利用AppKit原生的明暗模式自动适配能力：

struct AdaptiveMenuIcon: NSViewRepresentable {
    func makeNSView(context: Context) -> NSImageView {
        let imageView = NSImageView()
        // 直接调用Assets中已配置好的适配图片
        imageView.image = NSImage(named: "my image name")
        imageView.imageScaling = .scaleProportionallyDown
        return imageView
    }
    
    func updateNSView(_ nsView: NSImageView, context: Context) {}
}

// 使用方式
MenuBarExtra {
    MenuView(model: menuModel)
} label: {
    AdaptiveMenuIcon()
}

关键注意事项 #

• 图片资源的Assets配置是所有适配的基础，务必确认亮/暗版本已正确导入
• MenuBarExtra的Label处于独立环境层级，SwiftUI的Environment变量无法自动同步，需手动监听系统通知
• 监听通知后必须在视图消失时移除观察者，避免内存泄漏

内容的提问来源于stack exchange，提问作者Ronen M