iosswiftswiftuiuibuttonios26

iOS 26 UIButton prominentClearGlass icon color doesn't adapt to the brightness/darkness of content behind it

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(configuration: config)
            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:

enter image description here

And if I set the background color to pure white, it produces:

enter image description here

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?

enter image description here

enter image description here

Solution

  • First, only the "regular" glass variant has a "dynamic" foreground color depending on the environment. The Human Interface Guidelines says

    The regular variant blurs and adjusts the luminosity of background content to maintain legibility of text and other foreground elements. [...] Use the regular variant when background content might create legibility issues

    Clear glass does not dynamically change its background/foreground styles. We know this is by design because the HIG says,

    Only use clear Liquid Glass for components that appear over visually rich backgrounds.

    For optimal contrast and legibility, determine whether to add a dimming layer behind components with clear Liquid Glass

    As far as I know, the glass used for the tab bar is a different glass variant that developers do not have access to. There are a lot more glass variants.

    For regular glass, the behaviour of automatically changing the foreground color depends on many factors. The size of the glass seems to be one of them. This aligns with what Apple said in WWDC25 about how glass haves - smaller pieces of glass tends to be more transparent, and larger pieces of glass are more opaque.

    When glass flexes and morphs to larger sizes – like when presenting a menu from a toolbar button – its material characteristics change to simulate a thicker, more substantial material.

    Doing any of these things will cause the foreground color to become white when the background is black: