iosuikituivisualeffectviewuiblureffect

How to achieve pure black UIVisualEffectView when on top of black background?


In the Messages app the iMessage bar's background is pure white in light mode when scrolled to the bottom, and pure black in dark mode, so you don't see the blurred bar background until there's content under it. The top bar in the Twitter app currently works the same way. I want to do this in my app but I don't see how it can be achieved.

I have tried every possible UIBlurEffect but none of them are pure black on top of a black background, the darkest gray is systemChromeMaterial. In light mode, only regular and light are pure white. Notice the pure black/white background peeking out from under the stack at the bottom of these images.

Dark mode Light mode

The order from top to bottom:


Solution

  • A similar question was asked about why the extra light blur effect is light gray over white backgrounds and how to make it pure white. This solution works to achieve that and it also works to achieve pure black on top of black backgrounds! This works with the regular, prominent, extra light, light, and dark styles but none of the system materials. I ended up using the regular style to work in light and dark mode.

    if let vfxSubView = uiView.subviews.first(where: { String(describing: type(of: $0)) == "_UIVisualEffectSubview" }) {
        vfxSubView.backgroundColor = UIColor.black.withAlphaComponent(0.7)
    }
    

    enter image description here