The Apple.VibrancyEffect extension applies the Apple iOS "vibrancy" effect to an Item.

The vibrancy effect amplifies and adjusts the color of content behind an Apple.BlurLayer item, allowing the content placed within it to become more vivid. The specific appearance of the vibrancy is chosen to contrast against the Apple.BlurLayer style.

If you apply the effect to an item that is not a child of an Apple.BlurLayer, it has no effect.

For non-material styled blur layers, the vibrancy effect is depends on the item's color. If in doubt, for a basic vibrancy look, set the item's color to white.

For material styled blur layers, the vibrancy effect only uses the alpha channel of the item to which it is applied. The specific colors of the item are ignored. This makes it most useful when applied to simple text or mask-image style items.

In the example below, you can tap the panel to switch blur styles, and drag it around to see how the appearance of the vibrant text responds to the content behind it.

Apple.BlurLayer {
    Text {
        text: "Vibrancy"
        with Apple.VibrancyEffect {}

property Bool enabled: true

True if the effect is enabled, false if not.

property Apple.VibrancyEffect.Style style: .Default

The vibrancy style, for use with material styled blur layers. When used on a non-material styled Apple.BlurLayer, the style property has no effect.


The default vibrancy effect style. Currently equivalent to SecondaryLabel.