In iOS 26, I need my UIButton to automatically adapt the icon color based on the content behind it. For example, if there is a scrolling table view behind it and the content becomes light, then the button icon should be black. If content is dark, then icon should be white. The iOS UITabBar icons already do this.
How should I do this with UIButton of various styles: UIButton.Configuration.glass(), .clearGlass(), .prominentGlass(), .prominentClearGlass()?
Below example shows the issue:
import UIKit
import SnapKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .lightGray
let stackView = UIStackView()
stackView.axis = .vertical
stackView.spacing = 20
view.addSubview(stackView)
stackView.snp.makeConstraints { make in
make.center.equalToSuperview()
}
let imageConfig = UIImage.SymbolConfiguration(pointSize: 22, weight: .bold, scale: .large)
let padding = 20.0
[UIButton.Configuration.glass(),.clearGlass(),.prominentGlass(),.prominentClearGlass()].forEach { config in
let button = UIButton(type: .system)
button.configuration = config
button.setTitle(config.title, for: .normal)
button.setImage(UIImage(systemName: "square.and.pencil", withConfiguration: imageConfig)?.withRenderingMode(.automatic), for: .normal)
button.configuration?.contentInsets = NSDirectionalEdgeInsets(top: padding, leading: padding, bottom: padding, trailing: padding)
stackView.addArrangedSubview(button)
}
}
}
Above produces:
And if I set the background color to pure white, it produces:
As you can see, the icon colours aren’t adapting for the content behind them and thus hard to read. How is able to archive this in their UITabBar icons?
