Customizing Electron’s window title look on Mac

September 02, 2015

Electron is a nice shell for building native apps with web technologies. It doesn’t support all possible window styles on Mac out of the box, and I did a small investigation on how to get different window looks and behaviors working on Mac.

Update: I wrapped the patch in a proper pull request to Electron, which was approved and merged. So now you can set the window styles using the new API on BrowserWindow and don’t have to manually patch anything.

Getting started

To follow along, you need to have Electron building out of source on the Mac. Follow quick start and Mac build instructions. Write up some basic HTML and CSS.

If you build your app with default configuration, you’ll see something like this.

There is a way to get a frameless window with the frame: false configuration option. If you do it, you get this.

No title bar, which is nice. But also, no traffic lights (window controls), which is not nice. We’d still want to let the user control the window with standard controls. While in the past making custom window title bars was not that easy and people would do things like draw their own traffic lights, this ended up looking outdated and ugly on newer OS X versions. (I’m looking at you, Steam…)

Going back to native controls

Recent versions of OS X (Yosemite and newer) have updated API-s to still get the default traffic lights while hiding the title bar. If you have the luxury of working on these platforms and don’t need to support older ones, there’s no need for hacks, just use the system API.

Here’s two looks that you can easily accomplish with Electron. I’m not sure if Electron wants to have these as configuration options, and how they should be set to work on other platforms, and all that: I just did a local patch to the code. Here are the two looks and their code patches.

To get a simple hidden title bar like this…

… use this patch:

To get this slightly different look that has the traffic lights inset a bit more…

… use this patch:

In both of these cases, the window dragging behavior remains as the default: the user can grab the (invisible) title bar area and drag the window around. If you want dragging to work with other window parts, take a look at CSS draggable region.