transparent-titlebar: transparent title bar with native title label in Electron for Mac

Ryohei Ikegami — Tue, 02 Jan 2018 08:38:56 +0000

GitHub: https://github.com/seanchas116/transparent-titlebar

Customizing title bar of Electron apps in Mac

Many cool Mac apps customizes title bar and often hides original title bar background. Electron provides titleBarStyle option to hide original titlebar, but it also hides the title label.
If you want to make the title bar transparent while leaving the native title label visible, you'll need another way.

why needs native title label?

The best benefit of the native title level is Represented File.
It's difficult to reimplement this in DOM perfectly.

transparent-titlebar

I developed transparent-titlebar library, which uses Cocoa APIs to set title bars transparent while leaving title labels visible.
It customizes NSWindow's titlebarAppearsTransparent and styleMask to show content with entire space of window.

This is how to use this library:

let win: BrowserWindow
const transparentTitlebar = require('transparent-titlebar')

// Setup window to use transparent titlebar
transparentTitlebar.setup(win.getNativeWindowHandle())

// Set title color to red (must be called whenever the title has changed)
transparentTitlebar.setColor(win.getNativeWindowHandle(), 1, 0, 0, 1)

You may need to run electron-rebuild after install.

change color (in hacky way)

It's hard to change the text color of the title because Cocoa does not provide any API to change it directly.
Fortunately I found a way to find NSTextField from title bar subviews and change its color: http://stackoverflow.com/a/29336473

setTitleBarColor function uses this solution. It must be called whenever after the title has changed.
It is a hack and probably you have to use it with caution.
(this is because I published this in a separate package instead of a pull request to Electron)

Forem: Ryohei Ikegami

transparent-titlebar: transparent title bar with native title label in Electron for Mac

Customizing title bar of Electron apps in Mac

why needs native title label?

transparent-titlebar

change color (in hacky way)