How can I create Yosemite-style view with translucent/blurry background?

Question

In Yosemite sidebars have a semitransparent "vibrant" background. How can I create a view like that in 10.10/Xcode 6?

Can I give any view such background? I've found that NSOutlineView will default to such background when you give it "Source list" highlight style, but the sidebar in the Calendar.app doesn't appear to be an NSOutlineView, so I wonder if there's a generic solution for this.

Answer 1

With the introduction of the Yosemite version of the OSX operating system, Apple introduced a new mode called vibrancy, which is a light diffusion blur, to Cocoa window and window components. It's sort of like looking through a shower door, and uses the NSVisualEffectView. Apple explains this effect here.

I use this category on NSView. Simply call on the view you want to make vibrant. It is also backwards compatible with pre-Yosemite. (If you have a pre-Yosemite, you won't see the effect)

@implementation NSView (HS)

-(instancetype)insertVibrancyViewBlendingMode:(NSVisualEffectBlendingMode)mode
{
    Class vibrantClass=NSClassFromString(@"NSVisualEffectView");
    if (vibrantClass)
    {
        NSVisualEffectView *vibrant=[[vibrantClass alloc] initWithFrame:self.bounds];
        [vibrant setAutoresizingMask:NSViewWidthSizable|NSViewHeightSizable];
        // uncomment for dark mode instead of light mode
        // [vibrant setAppearance:[NSAppearance appearanceNamed:NSAppearanceNameVibrantDark]];
        [vibrant setBlendingMode:mode];
        [self addSubview:vibrant positioned:NSWindowBelow relativeTo:nil];
        
        return vibrant;
    }

    return nil;
}

@end

Detailed instructions from @Volomike follow…

How To Use

1. Add AppKit.framework to your Project Settings > Build Phases > Link Binary with Libraries so that it can recognize NSVisualEffectView.

2. Make an outlet delegate of your main window's default view, not the window itself, to your AppDelegate.m or AppDelegate.mm file. (If you're new at that, read this tutorial.) For purposes here, let's assume you named this as mainview, which then is addressable in code as _mainview.

3. Include the category in your project. If you're new at that, add the category before any @implementation line in your AppDelegate.m or AppDelegate.mm file.

4. In your AppDelegate.m or AppDelegate.mm file, in your @implementation AppDelegate, inside your applicationDidFinishLaunching class method, add this line of code:

[_mainview insertVibrancyViewBlendingMode:NSVisualEffectBlendingModeBehindWindow];

5. Now you need to learn how to add some code to give the other elements on your window, as well as the window itself, translucency. That translucency will allow this effect to show through into your window components as you require. This is explained here.

The net effect now is that either the entire window below the titlebar, or only parts you want (such as a sidebar), will show this vibrancy effect.