Opt-out borderless NSButton from NSVisualEffectView vibrancy

Question

I have a NSVisualEffectView with vibrancy containing text fields (NSTextField or NSComboBox) and borderless buttons. The buttons are positioned over the text fields and I want to disable the vibrancy effect on the borderless buttons since they're supposed to appear on the white background of the text fields.

What I tried doing, as per recommendation in the NSVisualEffectView class reference, is to wrap my NSButton inside another NSVisualEffectView with its state set to Inactive. What this does is it replaces the "vibrant" background by a light grey background.

The picture below illustrates this. The first field is my attempted solution, the second shows the default behavior of a borderless button as child of a NSVisualEffectView.

I also tried subclassing the NSButton and set its cell background color to white or clear but I always get the grey background.

How can I change the light grey background to a white or clear background? Thanks

Answer 1

I managed to solve this myself after a few hours of headache. The solution doesn't need the button to be wrapped in a NSVisualEffectView. Simply subclassing NSButton and overriding the allowsVibrancy property and setting it to false was enough.

In Swift:

override var allowsVibrancy: Bool { return false }