1

I have a requirement to change the title bar of the NSWindow to red in colour. When I am changing the background color, the entire window is becoming red.

I just want to change the title background color.

Thanks.

1
  • The answer so far is not a very good solution. It is hacky and prone to visually unacceptable compromises. Instead, you should look at the NSAppearance API and possibly this open source: github.com/luckymarmot/ThemeKit
    – Léo Natan
    Apr 14, 2018 at 14:27

1 Answer 1

1

In the window's Attributes Inspector in Interface Builder, turn on the "Transparent Title Bar" and "Full Size Content View" options. Then, put a red view at the top of the window's content view, and it should show up behind the title bar.

For the view, I just did this:

class RedView: NSView {
    // draw is simple; just fill the rect with red
    override func draw(_ dirtyRect: NSRect) {
        NSColor.red.set() // maybe experiment to find a better-looking shade of red
        dirtyRect.fill()
    }

    // provide an intrinsic content size, to make our view prefer to be the same height
    // as the title bar.
    override var intrinsicContentSize: NSSize {
        guard let window = self.window, let contentView = window.contentView else {
            return super.intrinsicContentSize
        }

        // contentView.frame is the entire frame, contentLayoutRect is the part not
        // overlapping the title bar. The difference will therefore be the height
        // of the title bar.
        let height = NSHeight(contentView.frame) - NSHeight(window.contentLayoutRect)

        // I just return noIntrinsicMetric for the width since the edge constraints we set
        // up in IB will override whatever we put here anyway
        return NSSize(width: NSView.noIntrinsicMetric, height: height)
    }
}

and arranged it like this:

enter image description here

with these window settings:

enter image description here

resulting in this:

enter image description here

Be careful; with great power comes great responsibility. Take care not to make the interface hard to use for people with red-green colorblindness. Looking at the image above, I'd probably go with a lighter shade of red than NSColor.red, since the darkness of it obscures the title a bit. But you can experiment with that until you get something that looks good.

6
  • I am not using story board but XIB. I am not able to get the Transparent Title bar. It is not present in appearance section. Please guide Dec 11, 2017 at 20:00
  • @RaghunathSahoo The options show up for me when selecting a window in either a XIB or a storyboard. Are you using Xcode 9, or some older version? Dec 11, 2017 at 20:10
  • I am using 8.3.3 Dec 11, 2017 at 20:11
  • 1
    Can you upgrade to Xcode 9? If not, you could set up the window in code by setting its titlebarAppearsTransparent and styleMask properties. Dec 11, 2017 at 21:00
  • @RaghunathSahoo In retrospect, it would be better to programatically set RedView's height using contentLayoutRect instead of hard-coding it to 23. We can do that by 1) implementing intrinsicContentSize in the view, 2) setting vertical content hugging and compression resistance both to 1000 so it will be forced to use the intrinsic height, and 3) setting a placeholder size in IB so that the ambiguity warning will shut up. This should make the view sized the same as the title bar even if Apple changes the title bar's size in some future version of macOS. I've updated the answer. Dec 11, 2017 at 21:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.