SF 符號亮/暗模式

Question

是否可以根據外觀將自定義色調應用於 SFSymbols 圖像？ 默認情況下，它從黑色變為白色，反之亦然，但我想定制那些 colors。 簡而言之，這可以按預期工作，從淺色切換到深色，反之亦然，但我需要控制應用哪種色調。

let image = UIImage(systemName: "car")
let imageView = UIImageView(image: image)

Answer 1

private var image = UIImage(systemName: "car")?.withTintColor(.systemRed, renderingMode: .alwaysOriginal)
private var imageView: UIImageView?

private func changeImageTint() {
    let tintColor: UIColor = traitCollection.userInterfaceStyle == .dark ? .systemRed : .systemBlue
    image = image?.withTintColor(tintColor)
    imageView?.image = image
}

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    changeImageTint()
}

或基於 userInterfaceStyle 創建自定義顏色（2種顏色）並使用它：

extension UIColor {
    static var mySymbolColor: UIColor { UIColor.init { $0.userInterfaceStyle == .dark ? .systemRed : .systemGreen } }
}

button.configuration?.image = UIImage(systemName: "car")?.withTintColor(.mySymbolColor, renderingMode: .alwaysOriginal)

Answer 2

您可以通過向imageAsset添加其他變體來為深色和淺色模式創建具有不同外觀的圖像實例。 例如：

let image = UIImage(systemName: "car")!
    .withTintColor(.systemRed, renderingMode: .alwaysOriginal)
let darkImage = UIImage(systemName: "car")!
    .withTintColor(.systemBlue, renderingMode: .alwaysOriginal)
    
image.imageAsset?.register(
    darkImage,
    with: .init(userInterfaceStyle: .dark)
)

現在image應該在亮模式下自動渲染為紅色，在暗模式下自動渲染為藍色。