lukakerr / nswindowstyles

A showcase of the many different styles of windows possible with NSWindow on macOS

Swift NSWindow Style Showcase

A showcase of many of the different styles of windows possible with NSWindow on MacOS. In some examples, NSToolbar, and NSVisualEffectView are used. No private API's are used.

To test each style, clone the project, open it in Xcode, uncomment each block of code in WindowController.swift and run. The numbers above each block correspond to each style below.

All code is in WindowController.swift in the windowDidLoad function. You should just be able to place each block inside that function to get the exact same result.

If you have a style to add, please make a pull request.

1. Hide title

Don't show the title text in the titlebar.

window?.titleVisibility = .hidden

2. Hide titlebar

Hide the titlebar completely.

window?.styleMask.remove(.titled)

3. Vibrant background

Create a vibrant background where whatever is behind the window can be slightly seen. This uses NSVisualEffectView.

let visualEffect = NSVisualEffectView()
visualEffect.blendingMode = .behindWindow
visualEffect.state = .active
visualEffect.material = .dark
window?.contentView = visualEffect

visualEffect.material can take multiple values including:

• .appearanceBased: based on the views appearance
• .dark: dark appearance
• .ultraDark: ultra dark appearance
• .light: light appearance
• .mediumLight: medium light appearance
• others such as .menu, .popover, .selection, .sidebar and .titlebar

4. Vibrant background with transparent titlebar

Same as above, with a transparent titlebar.

let visualEffect = NSVisualEffectView()
visualEffect.blendingMode = .behindWindow
visualEffect.state = .active
visualEffect.material = .dark
window?.contentView = visualEffect

window?.titlebarAppearsTransparent = true
window?.styleMask.insert(.fullSizeContentView)

5. Vibrant background without titlebar

Same as above, without the titlebar.

let visualEffect = NSVisualEffectView()
visualEffect.blendingMode = .behindWindow
visualEffect.state = .active
visualEffect.material = .dark
window?.contentView = visualEffect

window?.styleMask.remove(.titled)
window?.isMovableByWindowBackground = true

6. Vibrant background with custom border radius and no titlebar

A vibrant window with a custom border radius. The border radius value can be changed at visualEffect.layer?.cornerRadius = 16.0.

let visualEffect = NSVisualEffectView()
visualEffect.translatesAutoresizingMaskIntoConstraints = false
visualEffect.material = .dark
visualEffect.state = .active
visualEffect.wantsLayer = true
visualEffect.layer?.cornerRadius = 16.0

window?.titleVisibility = .hidden
window?.styleMask.remove(.titled)
window?.backgroundColor = .clear
window?.isMovableByWindowBackground = true

window?.contentView?.addSubview(visualEffect)

guard let constraints = window?.contentView else {
  return
}

visualEffect.leadingAnchor.constraint(equalTo: constraints.leadingAnchor).isActive = true
visualEffect.trailingAnchor.constraint(equalTo: constraints.trailingAnchor).isActive = true
visualEffect.topAnchor.constraint(equalTo: constraints.topAnchor).isActive = true
visualEffect.bottomAnchor.constraint(equalTo: constraints.bottomAnchor).isActive = true

7. Vibrant background with transparent titlebar and no window controls

A vibrant window with a standard border radius and no window controls or title.

let visualEffect = NSVisualEffectView()
visualEffect.blendingMode = .behindWindow
visualEffect.state = .active
visualEffect.material = .dark
window?.contentView = visualEffect

window?.styleMask.insert(.titled)

window?.titlebarAppearsTransparent = true
window?.titleVisibility = .hidden

window?.standardWindowButton(.miniaturizeButton)?.isHidden = true
window?.standardWindowButton(.closeButton)?.isHidden = true
window?.standardWindowButton(.zoomButton)?.isHidden = true

window?.isMovableByWindowBackground = true

8. Transparent titlebar

A window with a transparent titlebar.

window?.titlebarAppearsTransparent = true

9. Transparent titlebar with background color

Same as above with a background color.

window?.titlebarAppearsTransparent = true
window?.backgroundColor = .red

10. Toolbar

A window with a toolbar.

let customToolbar = NSToolbar()
window?.titleVisibility = .hidden
window?.toolbar = customToolbar

11. Transparent toolbar

Same as above, with the toolbar transparent.

let customToolbar = NSToolbar()
window?.titlebarAppearsTransparent = true
window?.titleVisibility = .hidden
window?.toolbar = customToolbar

12. Transparent toolbar without seperator

Same as above, without the toolbar seperator.

let customToolbar = NSToolbar()
customToolbar.showsBaselineSeparator = false
window?.titlebarAppearsTransparent = true
window?.titleVisibility = .hidden
window?.toolbar = customToolbar

13. Transparent toolbar with background color and without seperator

Same as above, with a background color.

let customToolbar = NSToolbar()
customToolbar.showsBaselineSeparator = false
window?.titlebarAppearsTransparent = true
window?.titleVisibility = .hidden
window?.backgroundColor = .red
window?.toolbar = customToolbar

14. Translucent toolbar

A translucent toolbar allowing for content behind the toolbar to be slightly seen.

let customToolbar = NSToolbar()
window?.titleVisibility = .hidden
window?.styleMask.insert(.fullSizeContentView)
window?.contentView?.wantsLayer = true
window?.contentView?.layer?.contents = NSImage(named: NSImage.Name("Background"))
window?.toolbar = customToolbar

15. Translucent titlebar

Same as above with a titlebar instead of a toolbar.

window?.titleVisibility = .hidden
window?.styleMask.insert(.fullSizeContentView)
window?.contentView?.wantsLayer = true
window?.contentView?.layer?.contents = NSImage(named: NSImage.Name("Background"))

16. Transparent titlebar without title

Same as above with a transparent titlebar.

window?.titleVisibility = .hidden
window?.styleMask.insert(.fullSizeContentView)
window?.titlebarAppearsTransparent = true
window?.contentView?.wantsLayer = true
window?.contentView?.layer?.contents = NSImage(named: NSImage.Name("Background"))

17. macOS Mojave dark mode

The macOS Mojave dark mode appearance.

if #available(OSX 10.14, *) {
  window?.appearance = NSAppearance(named: .darkAqua)
}

nswindowstyles's Issues

don't see control

why I don' see the nstableview

I forgot something ?

// 4
let visualEffect = NSVisualEffectView()
visualEffect.blendingMode = .behindWindow
visualEffect.state = .active
visualEffect.material = .dark
window?.contentView = visualEffect
//
window?.titlebarAppearsTransparent = true
window?.styleMask.insert(.fullSizeContentView)

Great resource

This is such a great collection and I've already cleaned up some of my implementation because of this so thank you. However I was wondering about something.

I have combined some of these approaches to create a dark visual effect, with transparent toolbar and no separator.

However I then need to add the existing contentView into the visual effects view. However I'm not sure how to align this correctly, positioned below the toolbar. Instead it aligns the top to the top of the window.

Any ideas about this? Is there a layoutGuide I can use here?

---

Update, I've come across contentLayoutGuide but I can't use it since its in a different hierarchy it seems.

Update to Swift 4.2

When macOS Mojave gets publicly released, this repo should be updated to Swift 4.2, accomodating for the new system wide dark mode option

Example of a multiple view

I'm wondering if it's possible to have two views in an app - a container view and a child view - where the container view is fully transparent with clickthrough enabled, and the child view has full control over its own transparency.

I'm specifically interested in this for an app written in Flutter that's running on macOS. Ideally, I'd like the Flutter app to have full control over its own transparency, even if the container view is set to transparent.

Right now, setting the transparency in swift, make the Flutter app transparent as well.

If anyone has an example of how to achieve this, I would greatly appreciate it.

Here is a ref stackoverflow

How to set NSToolBarItem to the right?

How to set NSToolBarItem to the right? I cannot find any API to set the position of NSToolBarItem. Please share with me if you have any ideas. Thank you!