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

Question

I want to use NSVisualEffectViewwith dark vibration, but in some situations the effect is too pale, so I would like to darken the background.

Here is an example application using views NSBoxto provide a darker background.

We see that the appearance of the NSBox"main" allows you to overlay the background, and the button sits happily on top of this. However, NSBoxa button with a custom appearance appears to “cut out” the background as a visual effect below.

I tried subclassing NSVisualEffectViewand overriding -drawRect:to fill it with a different color, and the result will be the same.

Is there a way to overlay vivid controls on other views?

Answer 1

There are two important layers to the Visual Effect view: background and hue. Setting both of them to “right” black seems to do the trick, but you need to do this anytime the boundaries 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;
    }
}