How can I overlay a background color over an NSVisualEffectView and use vibrant controls?

Question

I want to use NSVisualEffectView with dark vibrancy, but I find the effect too pale in some situations, so I'd like to darken the background.

Here is an example app, using NSBox views to provide a darker background.

We can see that the NSBox 'primary' appearance manages to overlay the background and the button happily sits on top of that. However, on the NSBox with custom appearance, the button appears to 'cut' through the background to the visual effect view beneath.

I've tried subclassing NSVisualEffectView and overriding -drawRect: to fill it with a different color and the result is the same.

Is there a way to overlay vibrant controls over other views?

Answer 1

The Visual Effect View seems to have two important layers: Backdrop and Tint. Setting both of these to the "right" black seems to do the trick, but you'll need to do this anytime the bounds change.

for (CALayer *sublayer in self.vibrancyView.layer.sublayers) {
    if ([sublayer.name isEqualToString:@"Backdrop"]) {
        NSLog(@"Backdrop: %@", sublayer.backgroundColor);
        sublayer.backgroundColor = [NSColor colorWithRed:0 green:0 blue:0 alpha:0.45].CGColor;
    } else if ([sublayer.name isEqualToString:@"Tint"]) {
        NSLog(@"Tint: %@", sublayer.backgroundColor);
        sublayer.backgroundColor = [NSColor colorWithRed:0 green:0 blue:0 alpha:1].CGColor;
    }
}